Angular Signals报错：computed/effect中不允许写入信号的问题

报错原因 #

你在模板中调用get()方法时触发了这个错误，核心原因是：Angular模板的表达式执行环境属于只读的计算上下文（类似computed函数的运行环境），不允许对信号进行写入操作。而你的get方法在找不到对应ID的对象时，会修改table信号，这直接违反了这个规则。

解决方案 #

方案1：将数据初始化逻辑移出模板（推荐） #

模板只负责展示数据，所有修改信号的操作都放在组件类的初始化钩子或事件处理函数中：

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonPipe],
  template: `
  <pre>
  Length: {{ table().length }}
  {{ table().find(t => t.id === 1) | json }}
  {{ table().find(t => t.id === 2) | json }}
  </pre>
  `,
})
export class App {
  table = signal<Test[]>([]);

  constructor() {
    // 提前在组件类中创建需要的对象
    this.get(1);
    this.get(2);
  }

  get(id: number): Test {
    let myTest = this.table().find((elem) => elem.id == id);
    if (myTest) return myTest;
    
    let newTest = new Test(id);
    // 用mutate简化数组修改，同时保留Test类的方法
    this.table.mutate(arr => arr.push(newTest));
    return newTest;
  }
}

class Test {
  id: number;

  constructor(id: number) {
    this.id = id;
  }

  someMethod() {
    console.log(this.id);
  }
}

方案2：拆分查询与修改逻辑 #

如果需要懒加载对象（比如用户交互时才创建），把get拆成两个方法：纯查询方法（可在模板中安全调用）和创建添加方法（仅在组件类/事件中调用）：

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonPipe],
  template: `
  <pre>
  Length: {{ table().length }}
  {{ findTest(1) | json }}
  {{ findTest(2) | json }}
  </pre>
  <button (click)="createAndAddTest(3)">添加ID为3的对象</button>
  `,
})
export class App {
  table = signal<Test[]>([]);

  constructor() {
    this.createAndAddTest(1);
  }

  // 纯查询方法：仅返回结果，不修改信号，可安全在模板中调用
  findTest(id: number): Test | undefined {
    return this.table().find((elem) => elem.id == id);
  }

  // 创建并添加对象：仅在组件类或事件回调中调用
  createAndAddTest(id: number): Test {
    let existing = this.findTest(id);
    if (existing) return existing;
    
    let newTest = new Test(id);
    this.table.mutate(arr => arr.push(newTest));
    return newTest;
  }
}

class Test {
  id: number;

  constructor(id: number) {
    this.id = id;
  }

  someMethod() {
    console.log(this.id);
  }
}

方案3：用untracked绕过依赖追踪（不推荐） #

如果必须在模板中触发创建逻辑，可以用untracked包裹信号写入操作，让Angular不将其纳入当前计算上下文，但这种方式会打破依赖追踪机制，可能导致视图更新异常，仅作特殊场景参考：

import { Component, signal, untracked } from '@angular/core';
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonPipe],
  template: `
  <pre>
  Length: {{ table().length }}
  {{ get(1) | json }}
  {{ get(2) | json }}
  </pre>
  `,
})
export class App {
  table = signal<Test[]>([]);

  constructor() {
    this.get(1);
  }

  get(id: number): Test {
    let myTest = this.table().find((elem) => elem.id == id);
    if (myTest) return myTest;
    
    let newTest = new Test(id);
    // 用untracked包裹信号修改
    untracked(() => {
      this.table.mutate(arr => arr.push(newTest));
    });
    return newTest;
  }
}

class Test {
  id: number;

  constructor(id: number) {
    this.id = id;
  }

  someMethod() {
    console.log(this.id);
  }
}

关于保留类方法的说明 #

使用this.table.mutate(arr => arr.push(newTest))替代你原来的两行代码，既简化了逻辑，又能完整保留Test类的方法——因为我们直接操作数组引用并添加类实例，没有对对象进行浅拷贝。

内容的提问来源于stack exchange，提问作者Benoît Dumont