Угловой: изменить описание текста в зависимости от того, какой элемент был нажат

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>

What I 'Я пытаюсь достичь, когда щелкнет первая плитка mat-grid, будет отображаться {{service.description}} первого массива, но я не уверен, как это сделать.

Спасибо

Answer 1

Изменить (click)="changeState()" на (click)="changeState(service)"

Затем в вашем сценарии скопируйте значение service в другую переменную (скажем, viewedService)

Затем в вашем последнем изменении divэто к этому:

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

В этом, по сути, у вас появляется только последний всплывающий элемент div, если заполнен viewedService, а затем отображается это значение.Если пользователь нажимает на другую плитку с матовой сеткой, содержимое, очевидно, будет изменено.

Надеюсь, что это поможет (PS не знаю, для чего вы используете @changeDivSize, поскольку я не так уж долго интересуюсь)

Answer 2

Вы можете попытаться отправить выбранную службу в качестве аргумента changeState обратно в элемент управления, который затем изменит значение currentService.

Затем измените

{{service.description}}

->

{{currentService.description}}

и вы можете удалить этот * ngFor из последнего div.

Очевидно, что currentService должен быть под контролем.

Надеюсь, это поможет.