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