* 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», отобразите соответствующий цветной круг.

Существует приблизительно 4 отчета (reportID), которые могут отображаться для одного идентификатора категории (id).

<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циклически повторяя итерации объектов, вы получаете дублированные результаты, если существует более одного отчета (reportID для одного идентификатора).Смотрите скриншот.

Моя цель состоит в том, чтобы, если для желтого цвета установлено значение "Y", отображать его на любой итерации, где идентификатор совпадает, то же самое длякрасный, но не дублируйте, вместо этого перезаписайте значение по умолчанию зеленого цвета, если найдено «Y».

Answer 1

Очень хороший вопрос - выполнение этого без функции TS сделало его более сложным ... Вы можете посмотреть рабочую демонстрацию здесь

• Я изменил структуру массива (функция sortArraybyID), чтобы мы могли разделять разделы для товарных линий («HewlettPackard», «EpsonCenter5000», «другой отчет»).
• Далее, так как у нас должна быть строка для каждого идентификатора отчета, мы также помещаем это в массив и просто распечатываем их
• Мы печатаем зеленый кружок по умолчанию для всех отчетов - поэтому все строки становятся зелеными (по умолчанию)
• далее, мы просто перезаписываем круг, если найдем совпадение - ключ должен иметь больший z-индекс:)

обновлено 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;}