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

Question

У меня есть следующий код в шаблоне 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> 

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

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

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

Answer 1

Я Quess он должен работать:

<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>