我有一个看起来像这样的对象数组:
newItems = [
{ id: 8997, yellow: 'Y', red: 'N', reportId: 1 }, //HewlettPackard
{ id: 8997, yellow: 'N', red: 'N', reportId: 2 }, //HewlettPackard
{ id: 6300, yellow: 'N', red: 'Y', reportId: 2 }, //EpsonCenter5000
{ id: 0019, yellow: 'Y', red: 'N', reportId: 1 } //another report
]
我正在使用ngFor遍历对象,并且工作正常。基本上,如果在对象中将黄色或红色设置为“ Y”,则显示相应的色环。
一个类别ID(id)大约可以显示4个报告(reportID)。
<div *ngFor="let loop of newItems">
<table>
<ng-template *ngIf="loop.yellow = 'Y' && loop.red == 'N' && loop.reportId == 1">
<tr>
<td class="yellow">Polaris South</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.red = 'Y' && loop.yellow == 'N' && loop.reportId == 1">
<tr>
<td class="red">Polaris South</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.reportId !== 1">
<tr>
<td class="green">Polaris South</td>
</tr>
</ng-template>
***********************
<ng-template *ngIf="loop.yellow = 'Y' && loop.red == 'N' && loop.reportId == 2">
<tr>
<td class="yellow">Dandride</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.red = 'Y' && loop.yellow == 'N' && loop.reportId == 2">
<tr>
<td class="red">Dandride</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.reportId !== 2">
<tr>
<td class="green">Dandride</td>
</tr>
</ng-template>
********************
<ng-template *ngIf="loop.yellow = 'Y' && loop.red == 'N' && loop.reportId == 3.1">
<tr>
<td class="yellow">Opmanual Internal</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.red = 'Y' && loop.yellow == 'N' && loop.reportId == 3.1">
<tr>
<td class="red">Opmanual Internal</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.reportId !== 3.1">
<tr>
<td class="green">Opmanual Internal</td>
</tr>
</ng-template>
**************************
<ng-template *ngIf="loop.yellow = 'Y' && loop.red == 'N' && loop.reportId == 3.2">
<tr>
<td class="yellow">Zetaphi Remarks</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.red = 'Y' && loop.yellow == 'N' && loop.reportId == 3.2">
<tr>
<td class="red">Zetaphi Remarks</td>
</tr>
</ng-template>
<ng-template *ngIf="loop.reportId !== 3.2">
<tr>
<td class="green">Zetaphi Remarks</td>
</tr>
</ng-template>
</table>
</div>
问题是,对于类别(即Hewlett Packard,Epson Center 5000)所在的每个框,是否为不同的ReportId找到黄色和红色值,因为for循环遍历对象的迭代,您得到重复的结果如果有多个报告(单个ID的报告ID)。查看屏幕截图。
我的目标是,如果将黄色设置为“ Y”,则在ID匹配的任何迭代中都将其显示,红色表示相同但不重复,如果找到“ Y”,则覆盖绿色默认值。
答案 0 :(得分:2)
一个很好的问题-如果不使用TS功能,则更具挑战性……您可以检查working demo here
更新了 app.component.ts :
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
newItems = [];
newArray: any[] = [];
mustHaveArray: any[] = [];
constructor() {
this.mustHaveArray = [
{ reportId: 1, descr: 'Polaris South' },
{ reportId: 2, descr: 'Dandride' },
{ reportId: 3.1, descr: 'Opmanual Internal' },
{ reportId: 3.2, descr: 'Zetaphi Remarks' }
];
this.newItems = [
{ id: '8997', yellow: 'Y', red: 'N', reportId: 1 }, //HewlettPackard
{ id: '8997', yellow: 'N', red: 'Y', reportId: 2 }, //HewlettPackard
{ id: '8997', yellow: 'N', red: 'N', reportId: 3.1 }, //HewlettPackard
{ id: '8997', yellow: 'Y', red: 'N', reportId: 3.2 }, //HewlettPackard
{ id: '6300', yellow: 'N', red: 'Y', reportId: 1 }, //EpsonCenter5000
{ id: '6300', yellow: 'Y', red: 'N', reportId: 2 }, //EpsonCenter5000
{ id: '0019', yellow: 'Y', red: 'N', reportId: 1 }, //another report
{ id: '0019', yellow: 'N', red: 'Y', reportId: 2 }, //another report
];
this.sortArraybyID();
}
sortArraybyID() {
for (var i = 0; i < this.newItems.length; i++) {
//console.log(i+" off" + this.newItems.length +" for:"+this.newItems[i].id);
let checkForID: boolean = false;
for (var j = 0; j < this.newArray.length; j++) {
if (this.newArray[j].id === this.newItems[i].id) { checkForID = true; break; }
}
if (checkForID == false) {
this.newArray.push({ id: this.newItems[i].id, details: [{ yellow: this.newItems[i].yellow, red: this.newItems[i].red, reportId: this.newItems[i].reportId }] });
} else {
this.newArray[j].details.push({ yellow: this.newItems[i].yellow, red: this.newItems[i].red, reportId: this.newItems[i].reportId });
}
}
//console.log(this.newArray);
}
}
更新了 app.component.html :
<div class='tableDiv2' *ngFor="let outer of newArray, let i = index">
<table>
<thead>
<th>
<tr> Category [{{i}}] <br/> ID:{{outer.id}} </tr>
</th>
</thead>
<ng-container>
<tbody>
<tr *ngFor="let category of mustHaveArray">
<td>
<ng-container *ngFor="let loop of outer.details; let idx2 = index">
<div class='defaultClass'>
</div>
<div *ngIf="category.reportId == loop.reportId" [ngClass]="(loop.yellow == 'Y' && loop.red == 'N') ? 'yellow' : (loop.yellow == 'N' && loop.red == 'Y') ? 'red' : 'green' ">
</div>
</ng-container>
<span class='descrClass'>
{{category.descr}}
</span>
</td>
</tr>
</tbody>
</ng-container>
</table>
</div>
更新了 app.component.css :
.yellow , .red , .green
{ border-radius: 50%; height:20px; width: 20px; position: absolute; text-align: center !important;
z-index:2;
}
.defaultClass { background:lightgreen; border-radius: 50%; height:20px; width: 20px; position: absolute; text-align: center !important; z-index:1; }
.yellow { background:yellow; }
.red { background:lightpink; }
.green { background:lightgreen; }
.tableDiv2{float:left; width:24%;}
.tableDiv{float:left; width:12%;}
.oldData{ width:100%; height:10px; float:left;}
.oldData .tableDiv{ background:lightgrey;}
.descrClass{ margin-left:25px; text-align: left !important;}