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);
}

Data from Firebase (world$)

如何只检索分配给复选框的对象？

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

Answer 1

想要使用mat-selection-list或mat-radio-group的声音

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

如何从带有复选框的数组中仅检索一个对象？

1 个答案: