Angular 6: Как визуализировать данные инъекции в отдельном разделе на основе выбранного элемента mat-nav-list?

Question

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

Мой список матов выглядит следующим образом:

<mat-nav-list>
   <mat-list-item *ngFor="let group of groups">
      <h4 mat-line>{{group.imageUrl}}{{group.name}}</h4>
   </mat-list-item>

Я хочу добавить данные из выбранной группы в div ниже по странице. Как мне это сделать?

Answer 1

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

  <h4 mat-line (click)="setData(group)">{{group.imageUrl}}{{group.name}}</h4>

В ТС:

setData(group) {
  this.selectedGroup = group;
}

В DIV, который находится внизу страницы:

<div *ngIf="selectedGroup">
  {{ selectedGroup | json }}
  <!--You can do whatever you want with selectedGroup here-->
</div>

Вот пример StackBlitz . Просто игнорируйте таблицу выше. Все внутри AppComponent.