Css 角度-除单击的元素外，*ngFor的所有元素的更改类

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

然后，如果你点击另一个按钮，这将恢复正常，所有其他按钮将崩溃，如果你再次点击第二个按钮，所有按钮将恢复正常

图片在底部

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

Html:

Css:

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

已解决：

html:

ts:

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

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

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

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

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

<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>

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

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

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

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 = '';
    }
  }