javascript - 想要将 mat-table 中的一些复选框设置为 true

Question

我正在为 Angular 色和权限编写代码，当管理员单击下一个组件上的 Angular 色时，将显示具有我已使用 mat-table 权限的 Angular 色因为我想检查 Angular 色已经拥有哪些权限，如果 Angular 色具有某些权限，那么应该像这样进行检查

目前显示未选择任何权限，但 Angular 色已经拥有一些权限

我可以与你分享代码

这是我的html

<form #postForm="ngForm" (ngSubmit)="updateRole()">
<fieldset class="form-group">
  <label>Role Name</label>
  <input class="form-control" placeholder="Enter Role Name" name="name" 
[(ngModel)]="roleName">
</fieldset>
<div class="form-group">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>

<div class="example-header">
<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" 
placeholder="Filter">
</mat-form-field>
</div>

<div class="example-container mat-elevation-z8">

<mat-table [dataSource]="dataSource" matSort>
   <!-- check boxes Column -->
   
<ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef>
     <mat-checkbox (change)="$event ? masterToggle() : null"
                   (checked)="selection.hasValue() && isAllSelected()"
                   [indeterminate]="selection.hasValue() && 
  !isAllSelected()">
     </mat-checkbox>
    </mat-header-cell>
     <mat-cell *matCellDef="let row">   
      <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
      </mat-checkbox>
    </mat-cell>
       
</ng-container>
  <!-- ID Column -->
  <ng-container matColumnDef="role_id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Row Id </mat-
header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
  </ng-container>

  <!-- Progress Column -->
  <ng-container matColumnDef="role_name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Row Title </mat-
  header-cell>
      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
  </ng-container>


  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;">
  </mat-row>
 </mat-table>

 <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

和我的 ts 文件

    import { Component, OnInit,ViewChild } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { RoleServiceService } from './../role-service.service';
import { MatTableDataSource, MatSort, MatPaginator, MatIcon } from 
'@angular/material';
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-
bootstrap/ng-bootstrap';
import {SelectionModel} from '@angular/cdk/collections';


export interface permissionData {
  name?: string;
  id?: string;
  
}
@Component({
  selector: 'app-edit-role',
  templateUrl: './edit-role.component.html',
  styleUrls: ['./edit-role.component.less'],
  providers: [NgbActiveModal,RoleServiceService]
})
 export class EditRoleComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  
  displayedColumns = ['select','role_id', 'role_name'];
  dataSource: MatTableDataSource<permissionData>;
  selection = new SelectionModel<permissionData>(true, []);

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

  /** Selects all rows if they are not all selected; otherwise clear 
selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }
  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to 
lowercase matches
    this.dataSource.filter = filterValue;
  }

  constructor(
    private route: ActivatedRoute,
    private RoleServiceService: RoleServiceService,
    private router:Router
  ) {

  }
  id:any={};
  roleData:any= [];
  roleName;
  role= [];
  roleModel:any;
  ngOnInit() {
    const permission: permissionData[] = [];
    this.route.params.subscribe(params => {
      this.id = +params['id']; // (+) converts string 'id' to a number         
      console.log(this.id);
    });

this.RoleServiceService.getRoleById(this.id).subscribe(data => {

    data['data'].forEach(element => { 
      this.roleData.push(element) 
      }); 
      this.roleName=data['role'].name;
      console.log(this.roleData);
      
  //this.roleData = data['data'];
})

this.RoleServiceService.getPermissions().subscribe(async res => {
  console.log(res);
  
  if (res['success'] == true) {
    for (var i = 0; i < res['data'].length; i++) {
      console.log(res['data'][i]);
      permission.push(res['data'][i]);
    }
    console.log(permission);
    // Assign the data to the data source for the table to render
    this.dataSource = new MatTableDataSource(permission);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
  
})

  }
    updateRole()
  {
    console.log(this.roleData);
 }

}

请告诉我你对此的想法

Answer 1

您需要使用 [(ngModel)]="row.hasPermission" 或 [checked]="row.hasPermission" 将复选框绑定(bind)到数据模型以及您的dataSource 应包含一个名为 hasPermission 的字段(名为的字段可以更改为任何名称)。

<mat-checkbox (change)="$event ? masterToggle() : null [(ngModel)]="row.hasPermission" (checked)="selection.hasValue() && isAllSelected()"[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>

或者

<mat-checkbox (change)="$event ? masterToggle() : null [checked]="row.hasPermission" (checked)="selection.hasValue() && isAllSelected()"[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>