Angular中*ngFor视图不更新：外部修改servers数组无效

问题根源 #

你遇到的问题核心在于：

• 组件内部调用push时，因为处于Angular的事件回调上下文中，框架会自动触发变更检测，所以视图能同步更新。
• 外部函数修改数组时，push属于原地修改数组，Angular变更检测默认对数组/对象的引用变化更敏感；加上markForCheck()仅标记组件需在下一次变更检测周期被检查，若当前没有触发变更检测的时机，视图就不会更新。

快速修复方案 #

方案1：立即触发变更检测 #

把外部函数里的cdr.markForCheck()替换为cdr.detectChanges()，强制立即执行变更检测：

export function addServerToServerList(contentComponent: ContentComponent, name: string, content: string) {
  const newServer = new Server(name, content);
  contentComponent.servers.push(newServer);
  contentComponent.cdr.detectChanges(); // 替换为detectChanges
}

方案2：修改数组引用（推荐） #

不原地修改数组，而是生成新数组改变引用，Angular会自动检测到变化并更新视图，无需手动调用变更检测：

export function addServerToServerList(contentComponent: ContentComponent, name: string, content: string) {
  const newServer = new Server(name, content);
  // 展开原数组并添加新元素，生成新数组引用
  contentComponent.servers = [...contentComponent.servers, newServer];
}

架构优化建议（最佳实践） #

当前EingabeComponent直接注入ContentComponent的做法是Angular反模式，组件间不应直接依赖实例，推荐两种更合理的通信方式：

方式1：通过父组件传递（@Output + @Input） #

1. 在EingabeComponent中定义@Output事件：

export class EingabeComponent implements OnInit {
  serverName!: string; 
  serverContent!: string;
  @Output() serverAdded = new EventEmitter<Server>();

  onCreateServer() {
    this.serverAdded.emit(new Server(this.serverName, this.serverContent));
  }
  // 其他代码不变
}

2. 在父组件模板中绑定事件，更新传递给ContentComponent的servers数组：

<app-eingabe (serverAdded)="onServerAdded($event)"></app-eingabe>
<app-content [servers]="servers"></app-content>

3. 父组件中处理事件：

export class ParentComponent {
  servers: Server[] = [];

  onServerAdded(server: Server) {
    this.servers = [...this.servers, server];
  }
}

方式2：使用共享服务 #

创建共享服务管理servers数组，两个组件注入该服务，通过RxJS的Observable自动通知视图更新：

@Injectable({ providedIn: 'root' })
export class ServerService {
  private serversSubject = new BehaviorSubject<Server[]>([]);
  servers$ = this.serversSubject.asObservable();

  addServer(server: Server) {
    const current = this.serversSubject.value;
    this.serversSubject.next([...current, server]);
  }
}

• EingabeComponent调用服务方法添加服务器：

export class EingabeComponent implements OnInit {
  serverName!: string; 
  serverContent!: string;

  constructor(private serverService: ServerService) {}

  onCreateServer() {
    this.serverService.addServer(new Server(this.serverName, this.serverContent));
  }
}

• ContentComponent订阅服务数据流：

export class ContentComponent implements OnInit {
  servers$!: Observable<Server[]>;

  constructor(private serverService: ServerService) {}

  ngOnInit(): void {
    this.servers$ = this.serverService.servers$;
  }
}

模板中使用async管道自动处理订阅：

<div *ngFor="let server of servers$ | async | keyvalue">
    <app-content-item [key]="server.key" [value]="server.value"></app-content-item>
</div>

内容的提问来源于stack exchange，提问作者Zeh Renics