考虑到下面的Angular Signals个示例,我有点困惑,当数组API(如forEach)足以触发react 性并更新UI/模板时,我何时应该使用信号API(如mutate()update())?这里有什么不同?使用的Angular 版本:16.0.1

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    {{usersList() | json}}
  `,
})
export class App {
  usersList: Signal<any> = inject(UserService).getUsersList();
  constructor() {
 
  }
}

bootstrapApplication(App);

@Injectable({
  providedIn: 'root',
})
export class UserService {
  private users = signal([
    { id: 1, name: 'Peter', country: 'USA' },
    { id: 2, name: 'Party Boy', country: 'USA' },
    { id: 3, name: 'John Connor', country: 'USA' },
  ]);

  constructor() {
      window.setTimeout(()=>{
        this.changeUsersListWithoutMutate();
      }, 3000),

      window.setTimeout(()=>{
        this.changeUsersListWithMutate();
      }, 5000)
  }

  changeUsersListWithoutMutate(){
    this.users().forEach((item) => {
      if (item.id === 1) {
        item.name = "changeListWithoutMutate";
      }
    });
  }

  changeUsersListWithMutate(){
    this.users.mutate((data) => {
      data.forEach((item) => {
        if (item.id === 1) {
          item.name = "changeListWithMutate";
        }
      });
    });
  }

  getUsersList() {
    return this.users;
  }
}

推荐答案

您在示例中观察到的是标准更改检测,因为您依赖于setTimeout().

setTimeout是由zone.js打补丁的API之一,这意味着每次调用它时都会触发一个更改检测周期并刷新您的DOM.由于信号包装的值已经更改(无论采用哪种方式),新值将出现在DOM中.

话虽如此,让我们回到信号的基础上:

changeUsersListWithoutMutate中,您没有更新信号,因为您正在读取它的值并更改它的嵌套值.信号本身无法知道它已被更新.

这就是为什么changeUsersListWithMutate是最好的 Select .您显式地告诉信号您正在更新它的值,并且该信号将触发更改检测.

如果我的回答中有什么不清楚的地方,请告诉我.

Angular相关问答推荐

如何取消针叶林输入的自动填充?

Primeng 12Angular 12自定义库:错误符号字段集声明于...在编译保存后未从Primeng/fieldset中导出

material 对话框中没有合适的注塑

是否自动处理Angular /RxJS观测数据的取消订阅

Angular 16+使用ngTemplateOutlet有条件地呈现几个模板中的一个

一个接一个的Angular http请求,但只关心第一个

Angular 15 在 URL 中使用@进行路由

使用 Observable 进行渐进式填充

有没有办法订阅部分 BehaviorSubject 值的变化?

ng14中具有强类型表单的FormBuilder

Angular 从 13.3.8 恢复到 13.3.7

在更改检测之前调用创建的间谍

来自 ngFor 项的动态 routerLink 值给出错误Got interpolation ({{}}) where expression was expected

Angular 7 测试:NullInjectorError:No provider for ActivatedRoute

将 Angular 5 升级到 6 时,我得到不兼容的对等依赖(使用 ng update @angular/core)

@angular/platform-b​​rowser 与 @angular/platform-b​​rowser-dynamic

Angular将 Select 值转换为 int

Angular 2中不同页面的多种布局

提交后在Angular 2中重置表单

Angular2 Routerlink:添加查询参数