没有 NgClass 对该函数的反应

Question

我在 NgClass 中使用了一个函数，该函数使用在 ngOnInit 中填充的数组。

ngOnInit -> prepareRezerwation() 创建 colorRezerwation 可验证：

    this.nodeService.getRezerwations(this.minMax).subscribe(rezerwations => { 
    this.prepareRezerwation(rezerwations);
    //   this.functionsService.showRezerwation(post, this.openingHours);
      // this.showSpinner = false;
    }, error => {
       console.log("Connection problem")
    });

html -> [ngClass]="setColor(1,i):

<ng-container matColumnDef="big">
    <th mat-header-cell *matHeaderCellDef class="xunk-calendar-cell"></th>
    <td mat-cell *matCellDef="let element; let i = index" [ngClass]="setColor(1,i)">Name</td>
</ng-container>

setColor(1,i):

  setColor(colIndex, rowIndex){
    this.colorRezerwation.position.forEach(arrayItem => {
      if(arrayItem.column === colIndex && arrayItem.row === rowIndex){
        return {'reservation': true}
      } 
    });
  }

当我跳过整个 forEach return 时它工作正常。

感谢大家的帮助。

Answer 1

您正在 return 将函数内的 class 变量传递给 forEach 循环，而不是传递给 setColor 函数。

setColor(colIndex, rowIndex){
    this.colorRezerwation.position.forEach(arrayItem => {
      if(arrayItem.column === colIndex && arrayItem.row === rowIndex){
   -->  return {'reservation': true} <-- this does not return to setColor
      } 
    });
}

您需要在 forEach 循环之外声明并保存变量，并且 return 那：

setColor(colIndex, rowIndex){
    let class;
    this.colorRezerwation.position.forEach(arrayItem => {
      if(arrayItem.column === colIndex && arrayItem.row === rowIndex){
        class = {'reservation': true}
      } 
    });
    return class;
  }

没有 NgClass 对该函数的反应

No NgClass reaction to the function

typescript

ng-class

angular