角度6：如何根据mat-nav-list所选项目在单独的部分中渲染注入数据？

Question

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

我的mat-nav-list如下：

<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>

在TS中：

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

在页面下方的DIV中：

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

这是示例StackBlitz。只需忽略上表即可。一切都在AppComponent内部。