Angular 2 - Ng для использования чисел вместо коллекций

Я бы предположил, что лучше использовать ajax и загрузить элемент svg с другой страницы.

$('.container').load(href + ' .svg_element');

Где href - расположение страницы с помощью svg. Таким образом, вы можете избежать любых неудобных эффектов, которые могут возникнуть при замене содержимого html. Кроме того, не забудьте развернуть svg после его загрузки:

$('.svg_element').unwrap();
146
задан Marco Jr 1 April 2016 в 10:45
поделиться

2 ответа

<div *ngFor="let number of [].constructor(myCollection)">
    <div>
        Hello World
    </div>
</div>

Это - хороший и быстрый способ повториться для суммы времен в myCollection.

Поэтому, если бы myCollection равнялся 5, Привет Мир был бы повторен 5 раз.

0
ответ дан 23 November 2019 в 21:03
поделиться

Используя пользовательскую Структурную Директиву с индексом:

Согласно Угловой документации:

createEmbeddedView Инстанцирует встроенного представления и вставляет его в этот контейнер.

abstract createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef.

Param          Type           Description
templateRef    TemplateRef    the HTML template that defines the view.
context        C              optional. Default is undefined.
index          number         the 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.

, Когда угловой создает шаблон путем вызова createEmbeddedView, он может также передать контекст, который будет использоваться в ng-template.

Используя контекст дополнительный параметр, можно использовать его в компоненте, извлекая его в шаблоне, как Вы были бы с *ngFor.

app.component.html:

<p *for="number; let i=index; let c=length; let f=first; let l=last; let e=even; let o=odd">
  item : {{i}} / {{c}}
  <b>
    {{f ? "First,": ""}}
    {{l? "Last,": ""}}
    {{e? "Even." : ""}}
    {{o? "Odd." : ""}}
  </b>
</p>

for.directive.ts:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

class Context {
  constructor(public index: number, public length: number) { }
  get even(): boolean { return this.index % 2 === 0; }
  get odd(): boolean { return this.index % 2 === 1; }
  get first(): boolean { return this.index === 0; }
  get last(): boolean { return this.index === this.length - 1; }
}

@Directive({
  selector: '[for]'
})
export class ForDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }

  @Input('for') set loop(num: number) {
    for (var i = 0; i < num; i++)
      this.viewContainer.createEmbeddedView(this.templateRef, new Context(i, num));
  }
}
0
ответ дан 23 November 2019 в 21:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: