Множественные привязки шаблонов на элементе углового2

54
4

У меня есть следующий код в шаблоне angular2. Он генерирует список глав и устанавливает свойство clicked на том, что является текущей главой.

<div class="chapters col s3">
<a *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter"
[routerLink]="['/tutorial/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
</div>

Проблема заключается в том, что он заполняется только при первоначальной загрузке страницы, если глава изменена, маршрутизатор не обновляет этот компонент, поэтому главу "нажмите" не изменится.

Я думал, может быть, я мог бы использовать *ngIf и привязать его к свойству chapter моего компонента, который подписан на параметры маршрута, следовательно, это само обновление. Затем выберите либо версию с выбранным классом, либо нет. Однако эта реализация вызывает ошибку:

<div class="chapters col s3">
<a *ngFor="let chapter of chapters; let i=index" *ngIf="i==chapter" (click)="clickedItem = i" class="chapter clicked" [routerLink]="['/tutorial/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
<a *ngFor="let chapter of chapters; let i=index" *ngIf="i==chapter" (click)="clickedItem != i" class="chapter" [routerLink]="['/tutorial/chapter', chapter.number]">{{chapter.number}}. {{chapter.title}} </a>
</div>

Не может иметь несколько привязок шаблонов для одного элемента. Используйте только один атрибут с именем "шаблон" или с префиксом *

Я не вижу, как обертывание этого в div с использованием свойства ngIf, так как мне нужен i из ngFor?

Любые идеи, как я мог бы сделать эту работу?

спросил(а) 2016-09-09T15:54:00+03:00 3 года, 10 месяцев назад
1
Решение
56

Я хочу, чтобы он работал:

<ng-template ngFor let-chapter [ngForOf]="chapters" let-i="index">
<a *ngIf="i === chapter">...</a>
</ng-template>

или вы можете использовать ng-container вместо ng-template:

<ng-container *ngFor="let chapter of chapters; let i = index">
<a *ngIf="i === chapter">...</a>
</ng-container>

ответил(а) 2016-09-09T15:56:00+03:00 3 года, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема