*ngFor - 如果找到，如何在模板循环中覆盖值

Question

我有一个如下所示的对象数组：

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”，则覆盖绿色默认值。

Answer 1

非常好的问题 - 在没有 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;}