Angular 17中如何在Effect内更新Signal值？解决NG0600错误

错误信息 #

NG0600: Writing to signals is not allowed in a computed or an effect by default. Use allowSignalWrites in the CreateEffectOptions to enable this inside effects.

问题场景 #

开发带搜索功能下拉框的表格视图，支持新增行。期望新增行时清空搜索框的Signal值，并重置下拉数据源，但在Effect调用的方法中更新Signal时触发上述错误。

相关代码 #

组件代码 #

export class LibGridViewComponent {
    private _libSubjectsGiproService = inject(LibSubjectsGiproService)

    constructor() {
    effect(() => {
      this.getValuesBySearchSignal()
    });
  }
  
  getValuesBySearchSignal(displaySource?: any): any[] {
    let testArr = [
      {
        "name": "B179 HEPATITIS VIRAL AGUDA NO ESPECIFICADA",
        "value": "B179"
      },
      {
        "name": "B980 HELICOBACTER PYLORI [H.PYLORI] COMO LA CAUSA DE ENFERMEDADES CLASIFICADAS EN OTROS CAPITULOS",
        "value": "B980"
      },
      {
        "name": "C799 TUMOR MALIGNO SECUNDARIO - SITIO NO ESPECIFICADO",
        "value": "C799"
      },
    ]

    let searchTerm = this._libSubjectsGiproService.getSearchTerm()
    
    let foundSource:any = []

    if (searchTerm && searchTerm != '') {
      foundSource = testArr.filter(i => i.name.toLowerCase().includes(searchTerm));

        let currentSource = this.initialDisplaySource.value;
        this.initialDisplaySource.next([...currentSource, ...foundSource]);
        this._libSubjectsGiproService.setSearchTerm('')
    } else {
      this.initialDisplaySource.next([])
    }

    return this.initialDisplaySource.value
  }
}

服务代码 #

export class LibSubjectsGiproService {
    searchTerm: WritableSignal<any> = signal<any>('');
    
    setSearchTerm(value: any) {
    this.searchTerm.set(value);
  }

  getSearchTerm() {
    return this.searchTerm();
  }
}

解决方案 #

方案1：允许Effect内写入Signal（需避免无限循环） #

如果确实需要在Effect内更新Signal，可创建Effect时添加allowSignalWrites: true选项，但必须确保更新的Signal不会再次触发当前Effect，否则会导致无限循环。

修改组件中的Effect代码：

effect(() => {
  this.getValuesBySearchSignal()
}, { allowSignalWrites: true });

注意：原代码中调用setSearchTerm('')会再次触发Effect（因为searchTerm是Effect的依赖），导致无限循环。需调整逻辑，比如只在特定条件下触发更新，或移除Effect对searchTerm的依赖（不推荐，会破坏响应式逻辑）。

方案2：重构逻辑（推荐） #

遵循Signal响应式设计原则，将状态修改逻辑放到触发事件（新增行）中，而非依赖Effect，这样更清晰且避免错误。

修改组件代码

export class LibGridViewComponent {
    private _libSubjectsGiproService = inject(LibSubjectsGiproService);
    initialDisplaySource = new BehaviorSubject<any[]>([]); // 假设原代码中是BehaviorSubject

    constructor() {
        // Effect仅监听searchTerm变化，更新下拉数据源
        effect(() => {
            const searchTerm = this._libSubjectsGiproService.getSearchTerm();
            this.updateDisplaySource(searchTerm);
        });
    }
  
    updateDisplaySource(searchTerm: string): void {
        const testArr = [
            {
                "name": "B179 HEPATITIS VIRAL AGUDA NO ESPECIFICADA",
                "value": "B179"
            },
            {
                "name": "B980 HELICOBACTER PYLORI [H.PYLORI] COMO LA CAUSA DE ENFERMEDADES CLASIFICADAS EN OTROS CAPITULOS",
                "value": "B980"
            },
            {
                "name": "C799 TUMOR MALIGNO SECUNDARIO - SITIO NO ESPECIFICADO",
                "value": "C799"
            },
        ];

        const foundSource = searchTerm.trim() 
            ? testArr.filter(i => i.name.toLowerCase().includes(searchTerm.toLowerCase()))
            : [];
        
        this.initialDisplaySource.next(foundSource);
    }

    // 新增行的触发方法
    onAddRow(): void {
        // 新增行时直接清空搜索Term，Effect会自动更新数据源为空
        this._libSubjectsGiproService.setSearchTerm('');
    }
}

服务代码保持不变

export class LibSubjectsGiproService {
    searchTerm: WritableSignal<any> = signal<any>('');
    
    setSearchTerm(value: any) {
        this.searchTerm.set(value);
    }

    getSearchTerm() {
        return this.searchTerm();
    }
}

说明 #

方案2将新增行时的状态修改逻辑直接放在触发事件中，Effect仅负责根据searchTerm的变化更新数据源，既符合响应式设计，也彻底避免了Effect内写Signal的错误和潜在的无限循环问题。

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