Angular 角度：根据单击的元素更改文本描述

我使用一个网格列表来显示图标&一个标题，带有*ngfor。单击其中一个元素后，我希望显示该元素（也在数组中）的描述

我的代码看起来像这样

<mat-grid-list cols="3" rowHeight="3:1" *ngIf="router.url === '/'">
  <mat-grid-tile *ngFor="let service of services | slice:0:3; let i=index" (click)="changeState()">
    <i class="material-icons"> {{ service.icon }}</i>
    <p> {{ service.name }} </p>
  </mat-grid-tile>
</mat-grid-list>
<div class="description" [@changeDivSize]=currentState *ngFor="let service of services">
  <p> {{service.description}} </p>
</div>

{{service.icon}
{{service.name}

{{service.description}

当单击第一个mat网格图块时，我试图实现的是，它将显示第一个数组的{{service.description}}，但我不确定如何进行

---

谢谢

您可以尝试将所选服务作为changeState的参数发送回控件，然后更改currentService的值

然后更改{{service.description}

->{{currentService.description}}

，您可以从最后一个div中删除这个*ngFor

显然，currentService必须处于控制之中

我希望这会有所帮助。

编辑

（单击）=“changeState（）”

到

（单击）=“changeState（服务）”

然后在脚本中，将

service

的值复制到另一个变量（例如

viewedService

）

然后在上一个div中将其更改为：

<div class="description" [@changeDivSize]=currentState *ngIf="viewedService">
  <p> {{viewedService.description}} </p>
</div>

{{viewedService.description}

在这种情况下，基本上，如果

viewedService

已填充，则只会弹出最后一个div，然后显示该值。如果用户单击另一个mat grid tile，则内容将明显更改

---

希望这有帮助（请注意，不确定您使用@changeDivSize的目的是什么，因为我对angular没有太长时间）

嘿，感谢您的回答，它按预期工作。为了回答您的问题，@changeDivSize是一个动画触发器，我正在使用类为“description”的div元素上，以动画方式打开/关闭div。