如何按材质在网格列表中使用ngfor [英] How to use ngfor in grid-list by material
本文介绍了如何按材质在网格列表中使用ngfor的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用Angluar材质实现动态网格列表.但我有一些问题.
I want to implement a dynamic grid list with Angluar material. but I have some problems.
我的JSON数据如下:
My JSON data looks like this:
[
{
"abc": "sdfgsdfgs",
"test": "dfgdfgdfgdfg"
},
{
"abc": "dfgsdfgsdfg",
"test": "dfgfgfgfgr"
},
{
"abc": "sdfgsdfgs",
"test": "asdfstest"
},
]
在HTML中,我想使用 ngFor
循环此JSON数据并显示在网格列表中.
And in the HTML I want to use ngFor
to loop this JSON data and to show in a gird list.
<mat-grid-list cols="2" rowHeight="7:1">
<mat-grid-tile>
<u>abc</u>
</mat-grid-tile>
<mat-grid-tile>
<u>test</u>
</mat-grid-tile>
<ng-container *ngFor="let item of datas">
<mat-grid-tile>
{{ item.abc}}
{{ item.test}}
</mat-grid-tile>
</ng-container>
</mat-grid-list>
预期结果应如下所示:
abc test
-------------------------------
sdfgsdfgs dfgdfgdfgdfg
dfgsdfgsdfg dfgfgfgfgr
````
How can I loop this?
推荐答案
在 mat-grid-tile
上添加循环.
<mat-grid-list cols="2" rowHeight="7:1">
<mat-grid-tile>
<u>abc</u>
</mat-grid-tile>
<mat-grid-tile>
<u>test</u>
</mat-grid-tile>
<ng-container>
<mat-grid-tile *ngFor="let item of datas">
{{ item.abc}}
{{ item.test}}
</mat-grid-tile>
</ng-container>
</mat-grid-list>
对于已编辑的问题:
<mat-grid-list cols="2" rowHeight="7:1">
<mat-grid-tile>
<u>abc</u>
</mat-grid-tile>
<mat-grid-tile>
<u>test</u>
</mat-grid-tile>
<ng-container *ngFor="let item of datas">
<mat-grid-tile>
{{ item.abc}}
</mat-grid-tile>
<mat-grid-tile>
{{ item.test}}
</mat-grid-tile>
</ng-container>
</mat-grid-list>
这篇关于如何按材质在网格列表中使用ngfor的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文