时间戳

首页 > 解决方案 > 如何使用已定义 html 结构的 ngFor 显示数据

json - 如何使用已定义 html 结构的 ngFor 显示数据

问题描述

我想在一个位于左侧的 div 中显示 json 数据中的前 5 个数据，其余数据在位于右侧的另一个 div 中。

但它不起作用。

代码是这样的：

 <div *ngFor="let data of jsonData; let i = index">
    <div
      class="content"
      [ngClass]="{ 'content-left': i < 5, 'content-right': i >= 5 }"
    >
      <ng-container *ngIf="data.state === 'Success'">
        <div class="state-success">
          <mat-icon>done</mat-icon>
        </div>
      </ng-container>
      <ng-container *ngIf="data.state === 'Failure'">
        <div class="state-failure">
          <mat-icon matTooltip="{{ data.message | translate }}">clear</mat-icon>
        </div>
      </ng-container>
      <ng-container *ngIf="data.state === 'Undefined'">
        <div class="state-undefined">
          <mat-icon matTooltip="{{ data.message | translate }}">clear</mat-icon>
        </div>
      </ng-container>
      <div class="message">{{ data.label | translate }}</div>
    </div>
  </div>

而这个 jsonData 结构是这样的：

[
    {
        "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
          "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
          "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
         "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
          "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
         "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
          "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
          "state": "Success",
        "label": "hello",
        "message": "message"
    },
    {
          "state": "Success",
        "label": "hello",
        "message": "message"
    }
]

我不知道如何编写这个 ngFor 代码。

有人有什么建议吗？

此致，

狮子座

标签： jsonangularangular-material

解决方案

编辑：

您的ngClass表达式可能如下所示：

<div class="content"
     [ngClass]="i < 5 ? 'content-left' : 'content-right'">

你可以使用ngIf：

<div *ngFor="let data of jsonData; let i = index">
  <ng-container *ngIf="i < 5">
    <!-- First five items -->
    ...
  </ng-container>
  <ng-container *ngIf="i >= 5">
    <!-- All other items -->
    ...
  </ng-container>
</div>

或使用else：

<div *ngFor="let data of jsonData; let i = index">
  <ng-container *ngIf="i < 5; else list">
    <!-- First five items -->
    ...
  </ng-container>
  <ng-template #list>
    <!-- All other items -->
    ...
  </ng-template>
</div>

推荐阅读