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

时间:2018-08-28 21:03:02

标签: angular angular-material

我有一个项目列表,我想将其用作选择器的一种类型,其中单击该项目并将结果数据呈现在其下方的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中。我该怎么做?

1 个答案:

答案 0 :(得分: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内部。