Как использовать ngfor в grid-списке по материалу - PullRequest
Новая
       47

Как использовать ngfor в grid-списке по материалу

1 голос
/ 13 мая 2019

Я хочу реализовать динамический список сетки с англуарным материалом.но у меня есть некоторые проблемы.

Мои данные JSON выглядят так: 

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

И в HTML я хочу использовать ngFor, чтобы зациклить эти данные JSON и показать в виде набора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?

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Добавьте цикл на 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>

Stackblitz

0 голосов
/ 13 мая 2019

Если ваши заголовки таблиц динамические, но они одинаковы для всех индексов вашего массива, вам нужно сделать следующее

component.ts 

get gridHeaders(): Array<string> {
    return Object.keys(this.datas[0]);
}

component.html 

<mat-grid-list cols="2" rowHeight="7:1">
      <mat-grid-tile *ngFor="let head of gridHeaders">
        <u>{{ head }}</u>
      </mat-grid-tile>
      <mat-grid-tile *ngFor="let item of datas">
        {{ item.abc}}
        {{ item.test}}
      </mat-grid-tile>
    </mat-grid-list>
...