Troube使用ngFor正确迭代数组

问题描述

我试图遍历返回“ notes”的数组，如下所示。我有两个名为 state 和 baseType 的字段，其含义如下：

状态：要显示的消息数

baseType：要显示彩色的消息数

我能够打印前三色（检查HTML），但是我不知道如何仅打印四分音符，或者后来很多都未着色。我再次打印了所有四个，但未着色。

我到目前为止所拥有的

CONTROLLER

private dynamicGraphicOrders(productOrderRoot: ProductOrderRoot) {

    const dynamicOrders = productOrderRoot.productOrder.getAllProductsOrder()
      .filter(item => item.priority === "Dinámico");

    dynamicOrders.forEach(order => {
      this.activationDeadlinesGraphicviewmodel.phoneNumber = order.description;
      this.activationDeadlinesGraphicviewmodel.orderDate = order.orderDate;
      this.activationDeadlinesGraphicviewmodel.expectedCompletionDate = order.expectedCompletionDate;
      this.activationDeadlinesGraphicviewmodel.state = Number(order.state);
      this.activationDeadlinesGraphicviewmodel.baseType = Number(order.baseType);
      this.getorderNotes(order);
      this.phoneNumberStepsUnfinished(order);
    });

  }

private getorderNotes(orderNotes: ProductOrderModel) {
    const notes = orderNotes.note.getAllNotes();

    notes.forEach(note => {
      this.activationDeadlinesGraphicviewmodel.orderNotes.push(
        note.text
      );
    });
  }

HTML

<ng-container *ngFor="let orderNotes of activationDeadlinesGraphicviewmodel.orderNotes; let i = index;">
    <ion-row>
        <ion-item *ngIf="activationDeadlinesGraphicviewmodel.baseType > i">
            <ion-col col-1>
                <span class="numberCircleFilled">{{ i+1 }}</span>
            </ion-col>
            <ion-col col-11>
                <span>{{ orderNotes }}</span>
            </ion-col>
        </ion-item>
    </ion-row>
</ng-container>
<ng-container *ngFor="let orderNotes of activationDeadlinesGraphicviewmodel.orderNotes; let i = index;">
    <ion-row>
        <ion-item *ngIf="activationDeadlinesGraphicviewmodel.state > i">
            <span class="numberCircleUnfilled">{{ i+1 }}</span>
            <span>{{ orderNotes }}</span>
        </ion-item>
    </ion-row>
</ng-container>

解决方法

如果索引小于baseType，我建议您“激活”一个CSS类。因此您的代码可能看起来像这样：

<ng-container *ngFor="let orderNotes of activationDeadlinesGraphicViewModel.orderNotes; let i = index;">
    <ion-row>
        <ion-item *ngIf="activationDeadlinesGraphicViewModel.state > i">
            <ion-col col-1>
                <span [class.numberCircleFilled]="activationDeadlinesGraphicViewModel.baseType > i"
                      [class.numberCircleUnfilled]="activationDeadlinesGraphicViewModel.baseType <= i">
                      {{ i+1 }}
                </span>
            </ion-col>
            <ion-col col-11>
                <span>{{ orderNotes }}</span>
            </ion-col>
        </ion-item>
    </ion-row>
</ng-container>