Angular 角度6：如何根据mat nav列表所选项目在单独的部分中呈现注入数据？

我有一个项目列表，我想用它作为选择器的一种类型，单击该项目，结果数据呈现在它下面的一个div中

我的mat nav列表如下：

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

---

我想将所选组中的数据注入页面下方的一个div中。如何完成此操作？

在类上声明一个属性，在列表项上设置它，单击，然后使用相同的属性绑定到要在其上显示数据的div

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

在页面下方的DIV中：

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

这是一个样品。忽略上面的表格。所有内容都在AppComponent中

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