Question

我想在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代码。

有人建议吗？

最好的问候，

狮子座

Answer 1

编辑：

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

Answer 2

在组件中创建方法并使用

firstfive = data.splice(5, data.length);
allBesideFirstFive = data.splice(0, 4);

比为ngFor和firstfive创建allBesideFirstFive

Answer 3

这里是有效的堆栈闪电示例：https://stackblitz.com/edit/angular-7-master-ufayvp

<div *ngFor="let number of numbers; let i=index;">
  <div *ngIf="i<5">{{number}}</div>
  <div *ngIf="i>=5">{{number}}</div>
</div>

它是如此基础，希望对您有所帮助。

就像@pzaenger在其他答案中提到的那样，您也可以使用else条件。

如何使用具有定义的html结构的ngFor显示数据

3 个答案: