双向装订是否需要二传手？

Question

I've created a checkbox with two-way binding to a getter. I don't have a setter because the getter will return a result of filtering of a list.

Locally this solution works fine but after deployment I get the following error "Cannot set property myProperty of [object Object] which has only a getter at Object.handleEvent"

<input type="checkbox" class="custom-control-input" id="myId" [(ngModel)]="myProperty" (change)="toggleSelection($event)"/>

public get myProperty(): boolean {
        return this.list.every(function(item: any) {
            return item.selected == true;
        });
    }

toggleSelection(event) {
        this.list.forEach(h => (h.selected = event.target.checked));
    }

I try to understand what is going on. When I create a setter and remove the change event it will work after deployment.

<input type="checkbox" class="custom-control-input" id="myId"[(ngModel)]="myProperty""/>

    public set myProperty(checked: boolean) { 
        this.list.forEach(h => (h.selected = checked));
    }
    public get myProperty(): boolean {
        return this.list.every(function(item: any) {
            return item.selected == true;
        });
    }

Now I want to understand why the first implementation works locally. Locally I don't need a setter but after deployment (a build) it needs a setter.

Answer 1

In angular, two ways binding means:

• The variable changes the HTML element (this is the get part of the binding).
• The HTML element changes the variable (this is the set part of the binding).

Therefore the right using in Angular for two ways binding is when you need to get & set. In my opinion, in your case you should use the option of one-way binding - variable that changes the HTML, like that:

<input type="checkbox" class="custom-control-input" id="myId"
       [checked]="myProperty" (change)="toggleSelection($event)"/>

public get myProperty(): boolean {
    return this.list.every(function(item: any) {
        return item.selected == true;
    });
}

toggleSelection(event) {
    this.list.forEach(h => (h.selected = event.target.checked));
}

This is the right way in the concept of Angular.