*ngFor - 如果找到,如何覆盖模板循环中的值
*ngFor - How to Override Value in a Template Loop if found
我有一组对象,如下所示:
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 为 reportID),则结果重复。见截图。
我的目标是,如果将黄色设置为 "Y",则在 id 匹配的任何迭代中显示它,红色也是如此,但不要重复,而是覆盖绿色默认值,如果 [=找到 27=]。
很好的问题 - 在没有 TS 功能的情况下做这件事更具挑战性......你可以检查 working demo here
- 我更改了数组的结构(函数 sortArraybyID),以便我们可以分隔产品线的部分('HewlettPackard'、'EpsonCenter5000'、'another report')。
- 接下来,由于每个报告 ID 都必须有一行,所以我们也将其放在一个数组中并简单地打印出来
- 默认情况下,我们会针对所有报告打印一个绿色圆圈 - 因此所有行都变为绿色(默认情况下)
- 接下来,如果找到匹配项,我们就覆盖圆圈 - 关键是要有更大的 z-index :)
已更新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;}
我有一组对象,如下所示:
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 为 reportID),则结果重复。见截图。
我的目标是,如果将黄色设置为 "Y",则在 id 匹配的任何迭代中显示它,红色也是如此,但不要重复,而是覆盖绿色默认值,如果 [=找到 27=]。
很好的问题 - 在没有 TS 功能的情况下做这件事更具挑战性......你可以检查 working demo here
- 我更改了数组的结构(函数 sortArraybyID),以便我们可以分隔产品线的部分('HewlettPackard'、'EpsonCenter5000'、'another report')。
- 接下来,由于每个报告 ID 都必须有一行,所以我们也将其放在一个数组中并简单地打印出来
- 默认情况下,我们会针对所有报告打印一个绿色圆圈 - 因此所有行都变为绿色(默认情况下)
- 接下来,如果找到匹配项,我们就覆盖圆圈 - 关键是要有更大的 z-index :)
已更新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;}