Question

我正在使用mat-grid-list来显示带有* 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>

单击第一个mat-grid-tile时，我要实现的目标是显示第一个数组的{{service.description}}，但是我不确定该如何处理。

谢谢

Answer 1

将(click)="changeState()"编辑为(click)="changeState(service)"

然后在脚本中，将service的值复制到另一个变量（例如viewedService）

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

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

基本上，在此情况下，如果填充viewedService并显示该值，则只会弹出最后一个div。如果用户单击另一个网格图块，则内容将明显更改。

希望有帮助（PS不确定您使用@changeDivSize的用途是什么，因为我没那么久就没角度了

Answer 2

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

然后更改

->

，您可以从最后一个div删除此* ngFor 。

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

我希望这会有所帮助。

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

2 个答案: