* ngIf на tr не обновляется

Question

У меня есть tr с оператором ngIf, который зависит от результата функции - функция выполняется по событию click (toggle (data.code)). См. Мой код: * TableData представляет собой набор записей

<tbody *ngFor="let data of TableData" (click)="toggle(data.code)">
   <tr *ngIf="isExpanded(data.code)">
     <td *ngfor="let column of columns">{{column.name}}</td>
   </tr>

Это функции в компоненте:

codesArray: number[] = [];

isExpanded(code)
{
 return (code%10 == 0) || this.codesArray.includes(code); // The second part of the condition changes and should effect the tr
}


toggle(code)
{
    if (this.codesArray.includes(code))
    {
       this.codesArray.splice(this.codesArray.indexOf(code), 1);
    }
    else //This part should happen first and change the tr state 
    {
       this.codesArray.push(code); //This actually happens but the tr not appear  
    }
}

Есть ли необходимость в некоторых вид обнаружения изменений?

Answer 1

Не используйте ngFor на теле. Вы получите многократные тела стола. Попробуйте использовать нг-контент.

<tbody>
  <ng-container *ngFor="let data of TableData">
   <tr (click)="toggle(data.code)">
      <ng-container *ngIf="isExpanded(data.code)">
        <td *ngfor="let column of columns">{{column.name}}</td>
     </ng-container>
   </tr>
  </ng-container>

Answer 2

Вы можете вручную запустить обнаружение изменений, используя функцию ChangeDetectorRef , ChangeDetectorRef.detectChanges()