麻烦使用 ngFor 正确迭代数组

Question

我正在尝试遍历一个数组，returns“注释”如下所示。我有两个名为 state 和 baseType 的字段，它们的含义如下：

state:要显示的消息数

baseType: 显示彩色的消息数量

我能够打印前三个彩色（检查 HTML），但我不知道如何只打印第 4 个音符，或者之后的许多音符都是未着色的。我再次打印所有 4 个，但没有着色。

我目前有什么

控制器

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>

Answer 1

如果索引小于 baseType，我建议您“激活”css class。所以你的代码看起来像这样：

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

麻烦使用 ngFor 正确迭代数组

Troube using ngFor to correctly iterate array

html

ionic-framework

ionic3

angular5