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”，“另一个报告”）。
接下来，由于每个报告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;}

* ngFor-如何在模板循环中覆盖值

1 个答案: