Как правильно управлять состоянием флажка в Angular 8? - PullRequest
Новая
       2

Как правильно управлять состоянием флажка в Angular 8?

1 голос
/ 07 ноября 2019

У меня есть два списка, вкусы и соки. 

flavors = ['Apple', 'Orange', 'Banana', 'Cherry'];
juice = [];

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

<mat-slide-toggle (change)="updateJuice(flavor)">Add</mat-slide-toggle>

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

<i class="fas fa-backspace clickable" (click)="updateJuice(flavor)"></i>

Я не уверен, как лучше всего управлять состоянием флажков в статическом списке вкусов, когда кто-то удаляет его из своего сока. Кто-нибудь может дать мне несколько советов / примеров?

Я надеялся, что смогу использовать ngModel для проверки списка вариантов, например: 

<mat-slide-toggle (change)="updateJuice(flavor)" [(ngModel)]="juice.indeOf(flavor) > -1">Add</mat-slide-toggle>

Однако компилятор некак эта идея.

Я сделал StackBlitz, который показывает рабочий пример.

https://stackblitz.com/edit/list-handler?file=src/app/app.component.html

Я хотел бы иметь возможность сделать это так, чтобы флажокв списке ароматов становится непроверенным, когда кто-то нажимает на значок, который удаляет его из списка соков. Есть ли простой способ сделать это?

1 Ответ

1 голос
/ 07 ноября 2019

В этом случае вы хотите работать с объектами, чтобы контролировать состояние. Это проще и вам не нужно использовать циклы, вы сразу получаете значение объекта по его ключу. Кроме того, у Angular есть keyvalue труба, это становится еще проще: 

flavors = [
  'Apple', 
  'Orange',
  'Banana', 
  'Cherry'
];
juice = {};

updateJuice(key, event) {
  if (event.checked) {
    this.juice = {...this.juice, [key]: key }
  } else {
    delete this.juice[key];
  }
}

И теперь вы также можете привязать juice Объект к состоянию MatSlideToggle, поэтому он удаляется, когда элемент удалениз juice Объект: 

Pick flavors for your juice:
<ul>
  <li *ngFor="let flavor of flavors"> 
    {{flavor}} <mat-slide-toggle [checked]="!!juice[flavor]" (change)="updateJuice(flavor, $event)">Add</mat-slide-toggle>
  </li>
</ul>

Flavors in juice:
<ul>
  <li *ngFor="let flavor of juice | keyvalue"> 
    {{flavor.key}} <i class="fas fa-backspace clickable" (click)="updateJuice(flavor.key, $event)"></i>
  </li>
</ul>

Разветвленная демоверсия

...