为变量赋值会显示只读错误

Question

component.ts

export class AppComponent {
  details:{a: boolean,
           b:boolean,
           c:boolean,
           x:number} = {
    a: false,
    b: false,
    c: false,
    x: 0,
  };

  public get value(): number {
    const numbermap = { a: 1, b: 2, c: 3 } //value of checkboxes;
    return Object.entries(this.details)
      // get only the entries with true value
      .filter(([_key, value]) => value)
      // map the keys having true to an array of numbers
      .map(([key]) => numbermap[key])
      // requred for preventing error from reduce if none selected `[].reduce()`
      .concat(0)
      // sum the numbers with reduce
      .reduce((prev = 0, curr) => prev + curr)
  }

  submit() {
    this.value = this.details.x; //Assigning value to variable
    console.log(this.value);
  }
}

What i'm doing is I've created cheeckboxes a,b,c which holds a value 1 2 3 respectively. When true each checkboxes value gets added. But when I'm trying to assign this value to x (in details array) I get an error "x is a readonly property".

Answer 1

Your value getter method's name is colliding with a value property on the instance. You could:

• Choose a different name, eg, use getValue instead of a value getter, allowing you to use this.value as a normal property

• Add a setter for value as well, eg:

   set value(newValue) { this._value = newValue; }

  (and define the type for this._value )

• Since the only place the value looks to be used is in submit , you could remove the assignment to the instance entirely and use a local variable instead, if that's what you're intending:

   submit() { const val = this.details.x; console.log(val); }

Answer 2

You need to define a set for the job of assigning values to value .

Example:

  public set value(new_value: number) {
    this.details.x = new_value;
  }