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

Question

我使用 *ngFor 在组件模板中重复生成下插入符和右插入符字体很棒的图标<tr>内s。我根据 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];
  }
}