如何在 Angular 6 中使用 mat-table 仅将未检查的行存储在数组中？

Question

我正在使用复选框实施mat-table。默认选中复选框。我很难 仅将那些行 存储在数组 中 user.How 未检查 以实现此目的？我的 HTML 文件是：

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!-- Checkbox Column -->
    <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef>
    <mat-checkbox (change)="$event ? masterToggle() : null"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()">
     </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
     <mat-checkbox (click)="$event.stopPropagation()"
                (change)="$event ? selection.toggle(row) : null"
                [checked]="true">
     </mat-checkbox>
     </td>
     </ng-container>

     <!-- Position Column -->
     <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef> No. </th>
     <td mat-cell *matCellDef="let element"> {{element.position}} </td>
     </ng-container>

     <!-- Name Column -->
     <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef> Name </th>
     <td mat-cell *matCellDef="let element"> {{element.name}} </td>
     </ng-container>

     <!-- Weight Column -->
     <ng-container matColumnDef="weight">
     <th mat-header-cell *matHeaderCellDef> Weight </th>
     <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
     </ng-container>

     <!-- Symbol Column -->
     <ng-container matColumnDef="symbol">
     <th mat-header-cell *matHeaderCellDef> Symbol </th>
     <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
     </ng-container>

     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"
     (click)="selection.toggle(row)">
     </tr>
 </table>

Component.ts 文件是：

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

    @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {


    displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
    dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
    selection = new SelectionModel<PeriodicElement>(true, []);

    selectedRows:Array<{}> = []

    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: string;
    position: number;
    weight: number;
    symbol: string;
    }

    const ELEMENT_DATA: PeriodicElement[] = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
    {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
    {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},

     ];

Stackblitz 是： https://stackblitz.com/edit/angular-m2bpd9

还有如何改变复选框的颜色？提前致谢。

要更改 mat-checkbox 的颜色，请使用：

    ::ng-deep .mat-checkbox-checked .mat-checkbox-background {
    background-color: grey !important;
    }

Answer 1

以下是实现该目标的方法：

1. 在复选框 checking/unchecking 上执行方法，我将其命名为 store:

2.在组件内部实现这个方法，例如，它将当前未选中的行分配给unselectedRows class 属性:

非常重要的是将此方法包装在空 setTimeout 中以确保它只会在当前视图变为实际视图后执行（您可以不使用它进行尝试，您会看到，我的意思）。

这是工作 STACKBLITZ。

更新

如果您不需要太多控制，可以使用 4 个预建主题之一：deeppurple-amber、indigo-pink , pink-bluegrey, purple-green, 我已将它们添加到下面 stackblitz 中的 styles.css。如果你想要更容易使用的主题，你应该创建包含以下内容的 SCSS 文件：

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-deep-orange);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

并将此文件包含到 .angular-cli.json 到 styles 部分：

现在您应该可以使用任何其他现有的 Angular Material 主题，您可以找到主题列表 HERE。

您还可以创建自定义主题，例如：

@import '~@angular/material/theming';
$custom-light-blue: (
  50: #e1f5fe,
  100: #b3e5fc,
  200: #81d4fa,
  300: #4fc3f7,
  400: #29b6f6,
  500: #3c3fcb,
  600: #039be5,
  700: #0288d1,
  800: #0277bd,
  900: #01579b,
  A100: #80d8ff,
  A200: #40c4ff,
  A400: #00b0ff,
  A700: #0091ea,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: white,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: $black-87-opacity,
    A400: $black-87-opacity,
    A700: white,
  )
);

@include mat-core();
$candy-app-primary: mat-palette($custom-light-blue);
$candy-app-accent:  mat-palette($custom-light-blue, A200, A100, A400);
$candy-app-warn:    mat-palette($custom-light-blue);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

这里是STACKBLITZ.

如何在 Angular 6 中使用 mat-table 仅将未检查的行存储在数组中？

How to store only unchecked row in an array using mat-table in Angular 6?

angular-material

angular

angular5

angular6

更新