如何從帶有復選框的陣列中僅檢索一個 object？

Question

我有幾個復選框，我有一個 function 應該console.log .log 從復選框中選擇的 object 但是當我 select 只返回一個復選框它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 的數據（世界美元）

如何僅檢索分配給復選框的 object？

- [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

我沒有寫這個 stackblitz，但似乎以足夠的方式展示了它的用法。 唯一的區別是他們在這里使用ngModel而不是像我上面使用的那樣使用ViewChild 。 結果相同： https://stackblitz.com/edit/material-selection-list-5-0-0?file=app/app.component.html