angular2要素の複数のテンプレートバインディング

Question

私はangular2テンプレートに次のコードを書いています。章のリストを生成し、現在の章であるクリックされたプロパティを設定します。

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

私はngForからiを必要として、私は、ngIfプロパティでDIVでこれを包むがどのように機能するかを見ることができませんか？

どのように私はこの作品を作ることができましたか？

Answer 1

私はそれが動作するはずquess：

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

またはあなたの代わりにng-templateのng-containerを使用することができます。

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