我需要一个用于双向绑定的setter吗？

Question

我创建了一个双向绑定到getter的复选框。我没有setter因为getter会返回列表过滤的结果。

在本地这个解决方案工作正常但在部署后我得到以下错误“无法设置[object Object]的属性myProperty，它只有一个在Object.handleEvent的getter”

<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));
    }

我试着了解发生了什么。当我创建一个setter并删除change事件时，它将在部署后工作。

<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;
        });
    }

现在我想了解为什么第一个实现在本地工作。本地我不需要setter但是在部署（构建）之后它需要一个setter。

Answer 1

在角度，两种方式绑定意味着：

• 该变量更改了HTML元素（这是绑定的get部分）。
• HTML元素更改变量（这是绑定的设置部分）。

因此，在Angular中使用两种方式绑定的权利是在需要获取和设置时。在我看来，在你的情况下你应该使用单向绑定选项 - 改变HTML的变量，如：

<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));
}

这是Angular概念中的正确方法。