升级Angular版本并切换为独立组件后出现NG0100错误的原因及正确实现方式咨询

首先，咱们先搞清楚NG0100错误到底是什么——它是Angular的变更检测循环错误，简单说就是Angular在检测组件状态变化的过程中，又触发了新的状态变更，导致它陷入了“检测-变更-再检测”的循环，或者检测到不稳定的状态，所以抛出了这个错误。

为什么异步赋值会触发错误，静态赋值却不会？ #

• 静态赋值是同步操作：当你直接写this.data = [{item1: 'foobar'}]时，这个赋值动作是在按钮点击事件的同一轮变更检测周期内完成的，Angular可以一次性处理完所有状态变化，不会出现后续的额外变更触发。
• API请求是异步操作：subscribe里的回调是在HTTP请求完成后才执行的，虽然HttpClient默认会在Zone.js上下文内触发变更检测，但这个回调执行的时机是在点击事件的变更检测周期之后。当子组件的MatTable接收到新数据时，matSort这类指令可能会触发一些内部的状态更新（比如排序状态的初始化），而这些更新可能间接触发了额外的变更检测，导致Angular检测到循环或者不稳定的状态。
• 旧版本非独立组件没这个问题，大概率是因为非独立组件的变更检测上下文和独立组件有差异，或者MatTable在新版本配合独立组件时，内部的变更逻辑更严格了。

正确的实现方式有这几种，你可以根据场景选： #

1. 继续使用@if包裹（简单直接）

你之前用@if (data.length > 0)包裹子组件的方式完全没问题，而且很合理——没有数据的时候本来就不需要渲染表格，还能避免空数据状态下组件初始化带来的潜在问题，代码也清晰，完全可以继续用。

2. 给子组件加上OnPush变更检测策略

对于独立组件，非常推荐用OnPush策略来优化性能，同时能避免很多不必要的变更检测问题。修改子组件的@Component装饰器：

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'my-component',
  imports: [MATERIAL_IMPORTS],
  templateUrl: './my-component.component.html',
  styleUrl: './my-component.component.css',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush // 新增这一行
})

OnPush策略下，子组件只有在输入属性的引用发生变化（比如你异步赋值的新数组），或者组件内部触发事件时才会触发变更检测，能大大减少检测次数，从根源上避免循环问题。

3. 用MatTableDataSource管理表格数据

直接把数组绑定给MatTable的dataSource有时候会引发一些变更检测的小问题，建议用Angular Material提供的MatTableDataSource来管理数据，这样更灵活，也更稳定：

• 子组件TS修改：

import { MatTableDataSource } from '@angular/material/table';
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  // ... 其他配置不变
})
export class MyComponent implements OnChanges {
  @Input() data: Carrec[] = [];
  displayedColumns: string[] = ['nom'];
  dataSource = new MatTableDataSource<Carrec>([]);

  ngOnChanges(changes: SimpleChanges): void {
    // 当data输入属性变化时，更新表格数据源
    if (changes['data']) {
      this.dataSource.data = this.data;
    }
  }
}

• 子组件HTML修改：

<mat-table matSort [dataSource]="dataSource"  class="mat-elevation-z8 col-12">
  <!-- 列定义部分不变 -->
</mat-table>

这种方式能更好地处理表格数据的更新、排序、过滤等操作，也能避免直接绑定数组带来的变更检测问题。

4. 用async管道替代手动订阅（最优雅的方式）

不需要手动写subscribe，而是把Observable直接传给子组件，用Angular的async管道处理订阅和变更检测，这是Angular推荐的异步数据处理方式：

• 父组件TS修改：

import { Observable, of } from 'rxjs';

export class ParentComponent implements OnInit {
  protected data$: Observable<MyItem[]> = of([]); // 初始化为空数组的Observable
  constructor(private apiService: ApiService) {}

  ngOnInit(): void {}

  getData() {
    this.data$ = this.apiService.getData();
  }
}

• 父组件HTML修改：

<my-component [data]="data$ | async"></my-component>
<br>
<button (click)="getData()">
    Get data
</button>

async管道会自动帮你订阅Observable，当数据到来时自动更新视图，还会在组件销毁时自动取消订阅，完全不用手动管理订阅，而且变更检测更稳定，因为Angular能精准追踪Observable的数据流变化。

备注：内容来源于stack exchange，提问作者marcm