Странное поведение с * ngIf, но работает со скрытыми

Question

Вместо того, чтобы копировать мои коды, позвольте мне поделиться кодом в stackblitz . Два действующих компонента:

1. SearchResultComponent
2. SearchResultTableComponent

Код, который меня интересует, - это файл шаблона search-result.component. html, а вот содержимое:

<div class="content-container">
  <button mat-raised-button color="primary" (click)="onLoadClick()">Load</button>
  <button mat-raised-button color="primary" class="nop-button">NOP button</button>

  <div class="table-container">
    <!-- Does not work -->
    <app-search-result-table *ngIf="searchResult.length" [searchResult]="searchResult"></app-search-result-table>

    <!-- Works -->
    <!-- <app-search-result-table [hidden]="!searchResult.length" [searchResult]="searchResult"></app-search-result-table> -->
  </div>
</div>

Я собираюсь скрыть таблицу, когда searchResult пуст (изначально она действительно пуста), и показывать ее только тогда, когда она по крайней мере, одна строка данных (это делается при нажатии кнопки «Загрузить»). Поэтому я ожидаю, что он будет работать, используя *ngIf="searchResult.length", но он работает не так, как ожидалось. Вместо этого происходит следующее: когда я нажимаю кнопку «Загрузить» в первый раз, отображаются заголовки таблицы, но не отображается строка данных (в моем реальном приложении данные при нажатии «Загрузить» поступают из API, но для демонстрации я случайный выбор элементов из массива и создание наблюдаемого с помощью оператора of). Однако строки данных появляются, когда происходит какое-либо событие, которое запускает обновление представления - щелчок в любом другом месте страницы или нажатие кнопки «NOP» (на самом деле это кнопка без операции) заставляет таблицу отображать строки данных . Последующее нажатие на кнопку «Загрузить» заставляет его работать должным образом. Но когда я использую директиву hidden, она всегда работает должным образом, в том числе и в первый раз. Строка есть в моем файле шаблона, и вы можете раскомментировать ее (и закомментировать строку ngIf) и попробовать ее в демонстрации stackblitz, которую я связал.

Я знаю разницу между директивами ngIf и hidden . Эта статья объясняет это очень подробно. Я также изучал этот SO сообщение, но моя ситуация отличается от той.

Меня беспокоит, почему в таблице отображаются только строки заголовка, когда я нажимаю кнопку «Загрузить» в первый раз, а затем полная таблица отображается при следующем обновлении DOM при использовании подхода *ngIf?

Answer 1

Вы не используете ввод dataSource в таблице mat, поэтому обнаружение изменений для таблицы не запускается. Вы можете изменить таблицу результатов поиска на:

@Component({
  selector: 'app-search-result-table',
  templateUrl: './search-result-table.component.html',
  styleUrls: ['./search-result-table.component.css']
})
export class SearchResultTableComponent implements OnChanges {
  @Input() searchResult: UserInfo[] = [];

  readonly dataSource = new MatTableDataSource<UserInfo>([]);
  
  columnNames: string[] = ['firstName', 'lastName', 'email'];

  ngOnChanges(changes: SimpleChanges) {
    if (changes.searchResult) {
      this.dataSource.data = this.searchResult;
    }
  }
}

с помощью шаблона:

<table mat-table class="mat-elevation-z8" [dataSource]="dataSource">
....

рабочий пример