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

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



当前其显示未选择权限，但角色已具有某些权限

我可以和你分享代码

这是我的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);
 }

}

请分享我对此的想法

最佳答案

您需要使用[(ngModel)]="row.hasPermission"或[checked]="row.hasPermission"将复选框绑定到数据模型，并且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>