Angular 使用*ngIf时行为怪异，但使用隐藏

与其复制粘贴代码，不如让我在中共享代码。正在发挥作用的两个组成部分是：

SearchResultComponent

SearchResultableComponent

我关注的代码是模板文件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>

负载
NOP按钮
解释得非常详细。我也学了这么多，但我的情况和那个不一样

让我感到困惑的是，为什么在我第一次单击“加载”按钮时，表格只显示标题行，而在使用
*ngIf
方法时，下一次DOM更新时，表格显示完整？
您没有使用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;
    }
  }
}

@组件({
选择器：“应用程序搜索结果表”，
templateUrl:“./search result table.component.html”，
样式URL:['./搜索结果表.component.css']
})
导出类SearchResultableComponent实现OnChanges{
@Input（）搜索结果：UserInfo[]=[]；
只读数据源=新MatTableDataSource（[]）；
columnNames:string[]=['firstName'，'lastName'，'email']；
ngOnChanges（更改：SimpleChanges）{
if（changes.searchResult）{
this.dataSource.data=this.searchResult；
}
}
}

以作为模板：

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


....

这实际上是预期的行为，可能是由于您“读取”搜索结果表组件上的输入的方式造成的。它基本上“丢失”了输入，因为数据更新可能在创建之后就已经发生了。这就是为什么隐藏会起作用——因为它只是隐藏了组件（但确实创建了组件）。我还没有看过你的stackblitz（在我手机上的mo上）——但它可能可以通过更新ngOnChanges中的内容在孩子体内解决。谢谢，但是你能解释一下为什么它在第一次加载时只显示标题行吗？@sааааааа因为
*ngIf=“searchResult.length”
在设置超时后解析为true，因此显示该表。只是数据没有在变更检测周期的正确时间设置以实际显示。这就是为什么您必须使用mat表上的
dataSource
输入来确保这一点。我也在
ngAfterViewInit（）中设置
dataSource
。此外，除了第一次“加载”单击外，还将按照后续“加载”单击的预期填充该表。因此，不确定为什么/如何在变更检测周期的正确时间设置数据。我希望得到任何进一步的解释。@Sаааааааа
ngAfterViewInit
hook本身不会触发更改检测周期。因此，在那里发生的任何事情都不会在当前周期中得到反映，而是会在连续的周期中得到反映。如果将其移动到
ngOnInit
并在
@ViewChild
上设置
{static:true}
，您将看到它也可以工作。