Нужен ли сеттер для двусторонней привязки? - PullRequest
Новая
       21

Нужен ли сеттер для двусторонней привязки?

0 голосов
/ 27 марта 2019

Я создал флажок с двусторонней привязкой к получателю. У меня нет сеттера, потому что он вернет результат фильтрации списка.

Локально это решение работает нормально, но после развертывания я получаю следующую ошибку «Невозможно установить свойство myProperty для [object Object], которое имеет только геттер в 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));
    }

Я пытаюсь понять, что происходит. Когда я создаю установщик и удаляю событие изменения, оно будет работать после развертывания. 

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

Теперь я хочу понять, почему первая реализация работает локально. Локально мне не нужен сеттер, но после развертывания (сборки) ему нужен сеттер.

1 Ответ

1 голос
/ 27 марта 2019

В угловом двухстороннем связывании означает:

  • Переменная изменяет элемент HTML (это get часть привязки).
  • Элемент HTML изменяет переменную (это часть привязки set ).

Поэтому правильное использование в 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.

...