列表类型信号的 Angular 17 信号中的变化检测问题（从 Angular 16 迁移）

Question

最近将我的应用程序迁移到 Angular 17，并遇到了一些信号问题。在版本 16 中，我创建了一个运行良好的列表类型信号，但现在在版本 17 中，更改检测似乎存在问题。我想知道这是否可能是我使用信号的方式上的错误。对于新版本如何解决这个问题，您有什么建议或建议吗？

import { Component, effect, signal } from '@angular/core';

@Component({
  selector: 'app-test-signals',
  standalone: true,
  imports: [],
  template: `
    <div>
        <button (click)="sum()"> add </button>
    </div>
  `,
  styles: ``
})
export class TestSignalsComponent {
  listObjectSignals = signal<{id:number, name:string}[]> ([])
  objectSignal = signal<{id:number, name:string}> ({id:0, name:'0'})
  cnt = 1;
  
  constructor(){
    effect(()=>{
      console.log(`List signal not triggered: ${this.listObjectSignals()}`)
    })
    effect(()=>{
      console.log(`Object signal triggered successfully: ${this.objectSignal()}`)
    })
  }

  sum(){
    let tempList: {id:number, name:string}[] = this.listObjectSignals();
    this.cnt = this.cnt + 1
    tempList.push({id:this.cnt, name:this.cnt.toString()})
    this.objectSignal.set({id:this.cnt, name:this.cnt.toString()})
    this.listObjectSignals.set(tempList)
    console.log(this.listObjectSignals(), tempList)
  }
}

Answer 1

由于它是一个对象数组，我认为引用没有被更改，所以

effect

没有被触发，而是只是进行对象解构来触发

effect

，您可以在 Angular github 上提出票证以检查它是否是错误！

this.listObjectSignals.set([...tempList]);

代码

import { Component, effect, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: `
    <div>
        <button (click)="sum()"> add </button>
    </div>
  `,
  styles: ``,
})
export class App {
  listObjectSignals = signal<{ id: number; name: string }[]>([]);
  objectSignal = signal<{ id: number; name: string }>({ id: 0, name: '0' });
  cnt = 1;

  constructor() {
    effect(() => {
      console.log(`List signal triggered: ${this.listObjectSignals()}`);
    });
    effect(() => {
      console.log(
        `Object signal triggered successfully: ${this.objectSignal()}`
      );
    });
  }

  sum() {
    let tempList: { id: number; name: string }[] = this.listObjectSignals();
    this.cnt = this.cnt + 1;
    tempList.push({ id: this.cnt, name: this.cnt.toString() });
    this.objectSignal.set({ id: this.cnt, name: this.cnt.toString() });
    this.listObjectSignals.set([...tempList]);
    console.log(this.listObjectSignals(), tempList);
  }
}

bootstrapApplication(App);

堆栈闪电战