NgIf-更新模型时未显示表格行

Question

目标：我正在尝试创建具有层次结构的表。单击td中的按钮时，它将isAnimalDisplay属性设置为true，并且这些行应出现。

问题：单击按钮时，将更新模型并将sub_animal数组中的所有元素的isAnimalDisplay设置为true。但是，这些行没有显示。

tree.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TreeComponent } from './tree.component';

describe('TreeComponent', () => {
  let component: TreeComponent;
  let fixture: ComponentFixture<TreeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ TreeComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TreeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

tree.component.html

<table border="1" class="table table-bordered table-striped table-hover">
  <thead>
    <tr>
      <th style="min-width: 200px; text-align: center;">Code</th>
      <th style="min-width: 300px; text-align: center">Name</th>      
    </tr>
  </thead>
<tbody>              
<ng-container *ngFor="let asset of asset.sub_animals"  >
  <tr *ngIf="asset.isAnimalDisplay"  style="height:30px;"  >
    <td class="align-middle"  style="text-align: left;"> 
      <button style="margin:3px" class="btn btn-sm btn-default" *ngIf="asset.isAnimalDisplay"  (click)='toggleSubAssetRows(asset)'> + </button>
      <button style="margin:3px" class="btn btn-sm btn-default" *ngIf="asset.isAnimalDisplay == false"  (click)='toggleSubAssetRows(asset)'> - </button>
      &nbsp; <b>{{asset.animalCode}}</b> 
    </td>
    <td class="align-middle" style="text-align: center">{{asset.animalName}}</td>    
  </tr>    
</ng-container>
</tbody>     

</table>

tree.component.ts

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.css']
})
export class TreeComponent implements OnInit {
  @Input() asset: AnimalsModel;
  constructor() { }

  ngOnInit() { 
    console.log(JSON.stringify(this.asset));
  }

  toggleSubAssetRows(asset: AnimalsModel) {        
    if (asset.sub_animals) { 
      console.log("here");
      asset.sub_animals.forEach(n => n.isAnimalDisplay ? this.collapseSubAssetRows(n) : n.isAnimalDisplay = true);
      asset.sub_animals.forEach(n => console.log(n.animalName + '  ' + n.isAnimalDisplay));
    }
  }

  collapseSubAssetRows(asset: AnimalsModel) {    
    asset.isAnimalDisplay = false;    
    if (asset.sub_animals) {      
      asset.sub_animals.forEach(n => this.collapseSubAssetRows(n));
    }
  }
}

以下提供了示例数据，如果不进行复制，则可以忽略：

import { Component, OnInit } from '@angular/core';
import { AnimalsModel } from '../app/tree/models/animals.model'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  rootAnimals: AnimalsModel = new AnimalsModel();

  ngOnInit(){
    let  animals = new AnimalsModel();
    animals.animalCode = "AN"
    animals.animalName = "Animals"

    let  reptlle = new AnimalsModel();
    reptlle.animalName = "Raptlle"
    reptlle.animalCode = "RPAN"

    let lizard = new AnimalsModel();
    lizard.animalName = "Lizard"
    lizard.animalCode = "LZRPAN"

    let snake = new AnimalsModel();
    snake.animalName = "Snake"
    snake.animalCode = "SNRPAN"

    let bird = new AnimalsModel();
    bird.animalName = "Bird"
    bird.animalCode = "BRRPAN"

    let salamander = new AnimalsModel();
    salamander.animalName = "Salamandar"
    salamander.animalCode = "SLMDLZRPAN"

    let canary = new AnimalsModel();
    canary.animalName = "Canary"
    canary.animalCode = "CMBRRPAN"

    let tweetle = new AnimalsModel();
    tweetle.animalName = "Tweetle"
    tweetle.animalCode = "TWBRRPAN"

    let mammal = new AnimalsModel();    
    mammal.animalName = "Mammal"
    mammal.animalCode = "MMAN"

    let equine = new AnimalsModel();
    equine.animalName = "Equine"
    equine.animalCode = "EQMMAN"

    let bovine = new AnimalsModel();
    bovine.animalName = "Bovine"
    bovine.animalCode = "BVMMAN"

    mammal.sub_animals.push(equine);
    mammal.sub_animals.push(bovine);
    canary.sub_animals.push(tweetle)
    bird.sub_animals.push(canary);
    lizard.sub_animals.push(salamander);
    reptlle.sub_animals.push(lizard);
    reptlle.sub_animals.push(snake);
    reptlle.sub_animals.push(bird);
    animals.sub_animals.push(reptlle);
    animals.sub_animals.push(mammal);

    this.rootAnimals = animals;
    this.rootAnimals.sub_animals.forEach(n => n.isAnimalDisplay = true);
  }


}

Following provides sample data:
**app.componenet.ts**

    import { Component, OnInit } from '@angular/core';
    import { AnimalsModel } from '../app/tree/models/animals.model'

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit{

      rootAnimals: AnimalsModel = new AnimalsModel();

      ngOnInit(){
        let  animals = new AnimalsModel();
        animals.animalCode = "AN"
        animals.animalName = "Animals"

        let  reptlle = new AnimalsModel();
        reptlle.animalName = "Raptlle"
        reptlle.animalCode = "RPAN"

        let lizard = new AnimalsModel();
        lizard.animalName = "Lizard"
        lizard.animalCode = "LZRPAN"

        let snake = new AnimalsModel();
        snake.animalName = "Snake"
        snake.animalCode = "SNRPAN"

        let bird = new AnimalsModel();
        bird.animalName = "Bird"
        bird.animalCode = "BRRPAN"

        let salamander = new AnimalsModel();
        salamander.animalName = "Salamandar"
        salamander.animalCode = "SLMDLZRPAN"

        let canary = new AnimalsModel();
        canary.animalName = "Canary"
        canary.animalCode = "CMBRRPAN"

        let tweetle = new AnimalsModel();
        tweetle.animalName = "Tweetle"
        tweetle.animalCode = "TWBRRPAN"

        let mammal = new AnimalsModel();    
        mammal.animalName = "Mammal"
        mammal.animalCode = "MMAN"

        let equine = new AnimalsModel();
        equine.animalName = "Equine"
        equine.animalCode = "EQMMAN"

        let bovine = new AnimalsModel();
        bovine.animalName = "Bovine"
        bovine.animalCode = "BVMMAN"

        mammal.sub_animals.push(equine);
        mammal.sub_animals.push(bovine);
        canary.sub_animals.push(tweetle)
        bird.sub_animals.push(canary);
        lizard.sub_animals.push(salamander);
        reptlle.sub_animals.push(lizard);
        reptlle.sub_animals.push(snake);
        reptlle.sub_animals.push(bird);
        animals.sub_animals.push(reptlle);
        animals.sub_animals.push(mammal);

        this.rootAnimals = animals;
        this.rootAnimals.sub_animals.forEach(n => n.isAnimalDisplay = true);
      }


    }