如何在网格列表中按材质使用 ngfor [英] How to use ngfor in grid-list by material

问题描述

我想用Angluar材质实现一个动态网格列表.但我有一些问题.

我的 JSON 数据如下所示:

<预><代码>[{"abc": "sdfgsdfgs",测试":dfgdfgdfgdfg"},{"abc": "dfgsdfgsdfg",测试":dfgfgfgfgr"},{"abc": "sdfgsdfgs",测试":asdfstest"},]

在 HTML 中，我想使用 ngFor 来循环这个 JSON 数据并显示在网格列表中.

<mat-grid-tile><u>abc</u></mat-grid-tile><mat-grid-tile><u>测试</u></mat-grid-tile><ng-container *ngFor="let item of datas"><mat-grid-tile>{{ item.abc}}{{ item.test}}</mat-grid-tile></ng-容器></mat-grid-list>

预期的结果应该是这样的:

abc 测试-------------------------------sdfgsdfgs dfgdfgdfgdfgdfgsdfgsdfg dfgfgfgfgr````我怎样才能循环这个?

解决方案

在 mat-grid-tile 上添加循环.

<mat-grid-tile><u>abc</u></mat-grid-tile><mat-grid-tile><u>测试</u></mat-grid-tile><ng-容器><mat-grid-tile *ngFor="let item of datas">{{ item.abc}}{{ item.test}}</mat-grid-tile></ng-容器></mat-grid-list>

对于编辑过的问题:

<mat-grid-tile><u>abc</u></mat-grid-tile><mat-grid-tile><u>测试</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-容器></mat-grid-list>

Stackblitz

I want to implement a dynamic grid list with Angluar material. but I have some problems.

My JSON data looks like this:

[
    {
        "abc": "sdfgsdfgs",
        "test": "dfgdfgdfgdfg"
    },
    {
       "abc": "dfgsdfgsdfg",
        "test": "dfgfgfgfgr"
    },
    {
        "abc": "sdfgsdfgs",
        "test": "asdfstest"
    },
] 

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>

the expected result should look like this:

abc               test
-------------------------------
sdfgsdfgs        dfgdfgdfgdfg
dfgsdfgsdfg      dfgfgfgfgr


````

How can I loop this? 

解决方案

Add the loop on 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>

For edited question:

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

Stackblitz

这篇关于如何在网格列表中按材质使用 ngfor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！