Как я могу получить только один объект из массива с флажками?

Question

У меня есть несколько флажков, и у меня есть функция, которая должна console.log выбранный объект из флажка, но когда я выбираю только один флажок, это console.log все и не возвращает значение из флажка

HTML:

<ng-container *ngIf="(world$ | async) as world">
  <div class="language" *ngFor="let language of world.languages">
    <mat-checkbox [checked]="get(language)">{{language.label}}</mat-checkbox>
  </div>
</ng-container>

Компонент:

world$: Observable<World>;

get(e) {
  console.log(e);
}

Данные из Firebase (world $)

Как получить только объектприсвоить чекбокс?

- [x] English <--- When checking this checkbox it should only console.log "English" 
- [ ] French

Answer 1

Похоже, что вы хотите использовать mat-selection-list или mat-radio-group

• https://material.angular.io/components/list/api
• https://material.angular.io/components/radio/overview

MatSelectionListдовольно прост в использовании, так как вы можете связать его и легко получить выбранные значения.Пример:

Шаблон компонента (флажки автоматически отображаются):

    <mat-selection-list #thingsList>
      <mat-list-option *ngFor="let something of things" [value]="something">
        {{something.name}}
      </mat-list-option>
    </mat-selection-list>

Компонент TypeScript:

@ViewChild('thingsList', { static: false }) thingsList: MatSelectionList;

Затем, чтобы получить выбранные значения, вы можете просто сделать:

this.thingsList.selectedOptions.selected

Я не писал этот стек, но, кажется, достаточно продемонстрировал использование.Единственная разница в том, что они используют ngModel здесь вместо ViewChild, как я использовал выше.Результат тот же: https://stackblitz.com/edit/material-selection-list-5-0-0?file=app/app.component.html