如何引用由ngfor以角度创建的特定元素？

Question

我通过 ngfor 指令创建了几个 div。

<div class="card" *ngFor="let item of list" [ngClass]="{'is-collapsed': isCollapsed , 'is-expanded':!isCollapsed}"  (click)="toggle()">
        <div class="card__inner " [ngClass]="{'js-expander': isCollapsed}">
          <span>Card</span>
          <mat-icon class="fa fa-folder-o">folder</mat-icon>
        </div>
        <div class="card__expander">
          <mat-icon class="fa fa-close" [ngClass]="{'js-collapser': isCollapsed}" >close</mat-icon>
          Expander
        </div>
      </div>

现在，如果我点击切换功能，它应该只展开特定的 div。但它扩展了所有的div。如何解决？ 这是我的切换功能看起来像：

 isCollapsed: boolean;
  list = [{a:1},{a:1},{a:1}]
  constructor() { }

  ngOnInit() {
    this.isloading = true;
    this.isCollapsed = true;
  }

  toggleIsCollapsed() {
    this.isCollapsed = !this.isCollapsed;

  }

我如何引用将根据点击展开的特定内容？我应该做什么修改？

Answer 1

为什么不编写一个指令来切换元素上的类？然后，您可以在整个传递类作为输入的过程中重复使用它。

import {Directive, ElementRef, Input} from '@angular/core';

@Directive({
    selector: '[toggle-class]',
    host: {
        '(click)': "toggleClass()"
    }
})
export class ToggleClassDirective {

    @Input() toggle_class: string = 'is-collapsed';

    private el:ElementRef;

    constructor(el: ElementRef) {
        this.el = el;
    }

    toggleClass() {
        this.el.nativeElement.classList.toggle(this.toggle_class);
    }
}

然后在你的 HTML 中

<div class="card" toggle-class toggle_class="is-collapsed"></div>

Answer 2

试试这样：

<div class="card" *ngFor="let item of list; let i=index"
    [ngClass]="{'is-collapsed': item.isCollapsed , 'is-expanded':!isCollapsed}"
    (click)="item.isCollapsed = !item.isCollapsed ">
    <div class="card__inner " [ngClass]="{'js-expander': item.isCollapsed}">
        <span>Card</span>
        <mat-icon class="fa fa-folder-o">folder</mat-icon>
    </div>
    <div class="card__expander">
        <mat-icon class="fa fa-close" [ngClass]="{'js-collapser': item.isCollapsed}">close</mat-icon>
        Expander
    </div>
</div>