小编Kir*_*ira的帖子

使用 Material Design 的表格中的单选按钮

我实际上是在尝试在材料设计和角度 6 的表格组件中插入一个单选按钮组。

所以在材料设计官方网站的例子中有一个带有复选框的表格,但我想要的是对表格的每个元素使用单选按钮做同样的事情。

我尝试使用 *ngFor 指令来执行此操作,但即使它是全局常量,我也无法访问 ELEMENT_DATA 数组。

import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {SelectionModel} from '@angular/cdk/collections';

@Component({
  selector: 'table-selection-example',
  styleUrls: ['table-selection-example.css'],
  templateUrl: 'table-selection-example.html',
})
export class TableSelectionExample {
  displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
  selection = new SelectionModel<PeriodicElement>(true, []);

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }
}

export interface PeriodicElement {
  name: …
Run Code Online (Sandbox Code Playgroud)

radio-button material-design angular

3
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×1

material-design ×1

radio-button ×1