Angular 6：修改添加方法以实现视图更新

嘿，我看出来问题在哪了——你模板里用DataSource做*ngFor的数据源，但新增数据时却是往retrieveData数组里push，这俩如果不是同一个引用的话，Angular的变更检测根本感知不到数据变化，所以视图才没更新。给你几个靠谱的解决办法：

方案1：直接对齐模板与操作的数据源 #

最简单的方式就是让模板循环的数组和你新增数据时操作的数组保持一致。如果retrieveData是你实际存储数据的数组，直接把模板里的DataSource换成retrieveData就行：

修改后的模板代码：

<ul>
  <li *ngFor="let data of retrieveData"> {{ data.id }} - {{data.title}} </li>
</ul>

这样当你执行this.retrieveData.push(...)时，因为是修改原数组的内容（引用未变），Angular的变更检测会自动捕捉到这个变化，视图就会同步更新新的数据行。

方案2：更新模板绑定的DataSource #

如果因为业务需求必须保留DataSource作为模板的数据源，那你需要在新增数据后手动更新DataSource。因为数组是引用类型，直接push原数组不会触发变更检测（如果DataSource是retrieveData的副本的话），所以我们可以通过创建新数组的方式来触发：

修改你的create()方法：

create() {
  const newPostId = this.postId + 1;
  this.apiService.create(newPostId, this.postTitle, this.postText).subscribe(result => {
    const newId = result['id'];
    // 先往存储数组里添加新数据
    this.retrieveData.push({id: newId, title: this.postTitle});
    // 通过扩展运算符创建新数组，更新DataSource触发变更检测
    this.DataSource = [...this.retrieveData];
    this.dataCount = this.dataCount + 1;
  }, 
  // 错误处理部分...
  );
}

这里用[...this.retrieveData]创建了一个新数组，赋值给DataSource后，Angular会检测到引用变化，从而更新视图。

方案3：使用可观察对象（推荐的Angular最佳实践） #

如果想更优雅地处理数据与视图的同步，推荐使用BehaviorSubject这类可观察对象来管理数据源。这种方式能让数据变化自动通知视图更新，无需手动处理变更检测：

第一步：在组件中定义可观察数据源 #

import { BehaviorSubject } from 'rxjs';

// 组件类内部
private dataSubject = new BehaviorSubject<any[]>([]);
// 暴露给模板的可观察对象
public data$ = this.dataSubject.asObservable();

第二步：初始化和更新数据 #

当你从接口获取初始数据时，把数据发送到dataSubject：

// 示例：初始化获取数据
this.apiService.getInitialData().subscribe(initialData => {
  this.dataSubject.next(initialData);
  this.dataCount = initialData.length;
});

修改create()方法，新增数据后更新可观察对象：

create() {
  const newPostId = this.postId + 1;
  this.apiService.create(newPostId, this.postTitle, this.postText).subscribe(result => {
    const newId = result['id'];
    // 获取当前的所有数据
    const currentData = this.dataSubject.value;
    // 创建包含新数据的新数组
    const updatedData = [...currentData, {id: newId, title: this.postTitle}];
    // 发送更新后的数据到Subject
    this.dataSubject.next(updatedData);
    this.dataCount = updatedData.length;
  },
  // 错误处理部分...
  );
}

第三步：模板中使用async管道 #

模板里通过async管道订阅可观察对象，自动同步数据：

<ul>
  <li *ngFor="let data of data$ | async"> {{ data.id }} - {{data.title}} </li>
</ul>

这种方式不仅能自动处理订阅与取消订阅，还能确保数据变化时视图实时更新，是Angular中处理数据流的推荐方式。

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