Привязка флажков непосредственно к списку идентификаторов ngModel - PullRequest
Новая
       32

Привязка флажков непосредственно к списку идентификаторов ngModel

0 голосов
/ 25 октября 2018

У меня есть модель, которая содержит список идентификаторов.У меня есть набор флажков, значения которых идентификаторы.Я хочу связать их вместе напрямую, но все, что мне удалось сделать, - это вручную подключить атрибуты [checked] и (change), что кажется более трудоемким, чем я должен делать.(То есть низкоуровневое взаимодействие между моделью и компонентом для функциональности, которая является настолько базовой, что кажется, что она уже должна поддерживаться в готовом виде.)

Модель: 

export class Product {
  id: number;
  name: string;
}
export class MyModel {
  products: number[];
  // plus other unrelated stuff of course
}

Затем в моем компоненте у меня есть ряд флажков (я использую mat-checkbox, но это не должно иметь значения), где отображаемое значение - это название продукта, а значение - идентификатор.

<mat-checkbox *ngFor="let product of products"
              [value]="product.id">{{product.name}}</mat-checkbox>

Я пытаюсь заполнить массив продуктов в модели набором значений выбранных флажков.Например, если продукты 1,3,5 проверены, массив продуктов модели будет [1,3,5].

Я знаю, что я смогу заставить это работать, если привязать [checked] к функции, которая проверяет, содержит ли массив модели идентификатор, а событие (change) - к функции, которая передает значение в массив.,Например: 

<mat-checkbox *ngFor="let product of products"
  [value]="product.id"
  (change)="$event.checked ? model.products.push(product.id) : model.products.splice(model.products.indexOf(product.id),1)"
  [checked]="model.products.includes(product.id)">{{product.name}}</mat-checkbox>

Но это довольно неприятно, особенно это событие изменения.Можно ли просто привязать компонент непосредственно к самой ngModel?Какой-то синтаксис, о котором я, возможно, не знаю?

...