隐藏Angular 2中列表中的特定元素

Question

我在<tr>使用*ngFor在组件模板中重复生成down-caret和right-caret字体真棒图标。 我正在隐藏一个并根据我在关联类中设置的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

您需要告诉Angular应该展开或折叠哪个项目。 您的组件的单个标志不能与单个项目一起分配。

尝试改为：

<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];
  }
}