角度2のリストから特定の要素を非表示

Question

*ngForの<tr>を使用して、コンポーネントテンプレートでダウンキャレットと右のキャレットフォントのすばらしいアイコンを繰り返し生成しています。私は1つを隠して、関連するクラスに設定したBooleanの値に基づいてもう一方を表示しています。しかし、Booleanの値を変更すると、ほかのアイコンもすべて非表示になります。私はちょうど私が他のものの代わりにクリックするものを隠したいと思う。テンプレート内でプロパティを設定し、両方の要素を取得してクラス内で非表示にする代わりにクラス内でプロパティを変更することで、テンプレート内でこれを行う方法はありますか？

コード：

<tr *ngFor="let obj of arr"> 
     <td id="{{obj.Parent}}" class='level{{obj.Level}}'>     
     <i *ngIf="showCollapse" (click)="collapseClicked($event)" class="fa fa-caret-down" aria-hidden="true"></i> 
     <I *ngIf="showExpand" (click)="expandClicked($event)" class="fa fa-caret-right" aria-hidden="true"></i> 
     {{obj.ATA}}</td> 
     <td>{{obj.Description}}</td> 
     <td>{{obj.MSI}}</td> 
</tr> 

Answer 1

あなたが展開または縮小されるべき項目角度を指示する必要があります。単一のアイテムでコンポーネントの単一のフラグを割り当てることはできません。

ではなく、試してみてください。

<tr *ngFor="let obj of arr"> 
     <td id="{{obj.Parent}}" class='level{{obj.Level}}'>     
     <i *ngIf="showCollapse === obj" (click)="collapseClicked(obj)" class="fa fa-caret-down" aria-hidden="true"></i> 
     <I *ngIf="showExpand === obj" (click)="expandClicked(obj)" class="fa fa-caret-right" aria-hidden="true"></i> 
     {{obj.ATA}}</td> 
     <td>{{obj.Description}}</td> 
     <td>{{obj.MSI}}</td> 
</tr> 

export class MyComponent { 
    arr = [{Parent: 'xxx', Level: 'yyy'}, {Parent: 'aaa', Level: 'bbb'},]; 
    showCollapse:any; 
    showExpand:any; 
    constructor() { 
    this.showCollapse = this.arr[1]; 
    this.showExpand = this.arr[0]; 
    } 
}