Как получить данные флажка в угловом материале

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

this.settings_data = ["one", "two", "three", "four", "five"];

<div class = "settings_head" fxFlex = "50" *ngFor = "let item of settings_data">
  <mat-checkbox formControlName = "settingsCheckboxvalues" (ngModelChange) = "seleteditems($event,item)">{{item}}</mat-checkbox>
</div>



seleteditems(event, value) {
  this.allitems.push(value);
}

angular material-design angular-material

18.05.2018 11:12

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

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

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

8 423

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я думаю, вы слишком усложняете.

Измените свой массив так, чтобы каждая запись имела свойство name и checked, и привяжите к ним флажки с помощью [(ngModel)].

array = [
    {
      name: 'one',
      checked: false
    },
    {
      name: 'two',
      checked: false
    },
    {
      name: 'three',
      checked: false
    },
    {
      name: 'four',
      checked: false
    },
    {
      name: 'five',
      checked: false
    }
  ]
  getCheckboxes() {
    console.info(this.array.filter(x => x.checked === true).map(x => x.name));
  }

html

<div *ngFor = "let item of array">
    <mat-checkbox [(ngModel)] = "item.checked" (change) = "getCheckboxes()">{{item.name}}</mat-checkbox>
</div>

Демо

Спасибо за ответ. Возможно ли использование formControlName вместо ngModel?

— 18.05.2018 11:37

18.05.2018 11:24

Было бы проще использовать реактивные формы:

this.form = this.fb.group({
      'one': false,
      'two': false,
      'three': false,
      'four': false
    })
    this.controlNames = Object.keys(this.form.controls).map(_=>_)
    this.selectedNames$ = this.form.valueChanges.pipe(map(v => Object.keys(v).filter(k => v[k])));

Шаблон:

<ng-container [formGroup] = "form">
  <mat-checkbox *ngFor = "let controlName of controlNames" [formControlName] = "controlName">{{controlName}}</mat-checkbox>
</ng-container>

Вот редакция вашего stackblitz.

18.05.2018 11:44