如何解决Troube使用ngFor正确迭代数组
我试图遍历返回“ notes”的数组,如下所示。我有两个名为 state 和 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。