Angular - 更改 *ngFor 的所有元素的类，除了单击的那个答案

【问题标题】：Angular - change classes of all elements of an *ngFor except for the one clickedAngular - 更改 *ngFor 的所有元素的类，除了单击的那个
【发布时间】：2020-08-19 22:42:53
【问题描述】：

我正在使用 angular 10，我想创建一个界面，当您单击一个元素（数组 [???]）时，其他元素会折叠（在这个更简单的版本中更改颜色和宽度）。

然后，如果您单击另一个，则会恢复正常，而所有其他都崩溃，如果您再次单击第二个，则一切都会恢复正常。

图片在底部。

我只能做与第一部分相反的事情：如果你点击一个元素，这一个会改变。

HTML：

<div *ngFor="let name of disney" class="basic" (click)="function(name)" [class.selected]="clickedClass === name">
    {{name}}
</div>

Ts：

disney: string[] = ['pippo', 'pluto', 'topolino'];

clickedClass: any;
  function(name) {
    this.clickedClass = name;
  }

CSS：

.basic {
    height: 50px;
    background-color: beige;
}

.selected {
    height: 100px;
    background-color: burlywood;
}

3张图片让你明白我的意思：

If you, hypothetically, click on the last paragraph of the 1st image the others collapse as the 2nd image show.

All except the one clicked collapsed and if you click on the middle paragraph you'll obtain the 3rd image

If you click on the opened paragraph you'll go to the 1st image

【问题讨论】：

标签： css angular typescript

【解决方案1】：

已解决：

html:

<div style="margin-bottom: 30px;" *ngFor="let name of disney" (click)="function(name)"
    [class.basic]="basicClass == 'basic' || [basicClass == '' && collapsedClass == ''] "
    [class.selected]="selectedClass === name"
    [class.collapsed]="collapsedClass == 'collapsed' && selectedClass !== name">
    {{name}}
</div>

css:

.basic {
    height          : 100px;
    background-color: beige;
}

.selected {
    height          : 100px;
    background-color: rgb(135, 207, 147);
}

.collapsed {
    height          : 50px;
    background-color: rgb(158, 185, 235);
}

ts：

disney: string[] = ['pippo', 'pluto', 'topolino'];

  selectedClass: string;
  collapsedClass: string;
  basicClass: string;

  function(name) {
    if (this.selectedClass === name) {
      console.log(name);
      this.basicClass = "basic";
      this.selectedClass = '';
      this.collapsedClass = '';
    }
    else {
      this.selectedClass = name;
      this.collapsedClass = "collapsed";
      this.basicClass = '';
    }
  }

【讨论】：