Как получить все значения флажков в угловом материале2 без использования каких-либо форм - PullRequest
Новая
       7

Как получить все значения флажков в угловом материале2 без использования каких-либо форм

0 голосов
/ 18 февраля 2019

Я строю свои флажки, используя ngFor: 

 <ng-container *ngFor="let cb of (myList$ | async)">
      <mat-checkbox
        [value]="cb.name"
        [checked]="cb.checked"
        (change)="checkboxChange($event)" // only giving single value
        >{{ cb.name }}</mat-checkbox
    </ng-container>

(change)="checkboxChange($event)", дающий только одно значение, но я ищу все значения флажков.

Любые идеи, какполучить все флажки checked значений без использования каких-либо форм?

В документах не видно ничего подобного https://material.angular.io/components/checkbox/overview

1 Ответ

0 голосов
/ 18 февраля 2019

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

<ng-container *ngFor="let cb of list">
      <mat-checkbox
        [checked]="cb.checked"
        (change)="cb.checked = $event.checked;
        checkboxChange()" >{{ cb.name }}
      </mat-checkbox>
</ng-container>

comp ts file 

export class AppComponent implements OnInit {
  name = 'Angular';
  myList$;
  list = []

  ngOnInit() {
    this.myList$ = of([
      {
        name: 'A', checked: true
      },
      {
        name: 'B', checked: false
      },
      {
        name: 'C', checked: true
      }]);

    this.myList$.subscribe((data) => {
      this.list = data;
    })

  }

  checkboxChange() {
    console.log(this.list)
  }
}

См. Это demo

Примечание: Также я использую отдельный list для итерации, которая не является наблюдаемой, потому что это будет полезно для получения всех обновленных значений флажков.

...