Javascript 要将mat表中的一些复选框设置为true吗

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

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

我可以和你分享代码

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

角色名
提交
行Id
{{row.id}}
行标题
{{row.name}

还有我的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);
 }

}

从'@angular/core'导入{Component，OnInit，ViewChild}；
从'@angular/Router'导入{Routes，RouterModule，Router}；
从'@angular/router'导入{ActivatedRoute}；
从“/../role service.service”导入{RoleServiceService}；
从导入{MatTableDataSource、MatSort、MatPaginator、MatIcon}
'角度/材料'；
从'@ng'导入{NgbModal，modaldismissreases，NgbActiveModal}-
bootstrap/ng bootstrap'；
从'@angular/cdk/collections'导入{SelectionModel}；
导出接口许可数据{
名称？：字符串；
id？：字符串；
}
@组成部分({
选择器：“应用程序编辑角色”，
templateUrl:“./edit role.component.html”，
样式URL:['./编辑角色.component.less']，
提供者：[NgbActiveModal，角色服务]
})
导出类EditRoleComponent实现OnInit{
@ViewChild（MatPaginator）分页器：MatPaginator；
@ViewChild（MatSort）排序：MatSort；
displayedColumns=[“选择”，“角色id”，“角色名称]；
数据源：MatTableDataSource；
selection=新SelectionModel（true，[]）；
isAllSelected（）{
const numSelected=this.selection.selected.length；
const numRows=this.dataSource.data.length；
返回numSelected==numRows；
}
/**如果未全部选中，则选择所有行；否则清除
选择*/
masterToggle（）{
此.isAllSelected（）？
this.selection.clear（）：
this.dataSource.data.forEach（row=>this.selection.select（row））；
}
applyFilter（filterValue:string）{
filterValue=filterValue.trim（）；//删除空白
filterValue=filterValue.toLowerCase（）；//数据源默认为
小写匹配
this.dataSource.filter=filterValue；
}
建造师(
专用路由：激活的路由，
私人角色服务：角色服务，
专用路由器
) {
}
id:any={}；
roleData:any=[]；
罗兰胺；
角色=[]；
roleModel：任何；
恩戈尼尼特（）{
const权限：permissionData[]=[]；
this.route.params.subscribe（params=>{
this.id=+params['id']；/（+）将字符串'id'转换为数字
console.log（this.id）；
});
this.RoleServiceService.getRoleById（this.id）.subscribe（数据=>{
data['data'].forEach（元素=>{
此.roleData.push（元素）
}); 
this.roleName=data['role'].name；
console.log（this.roleData）；
//this.roleData=数据['data']；
})
this.RoleServiceService.getPermissions（）.subscribe（异步res=>{
控制台日志（res）；
如果（res['success']==true）{
对于（var i=0；i

---

请与我分享您对此的想法您需要使用

[（ngModel）]=“row.hasPermission”

或

[checked]=“row.hasPermission”

将您的复选框绑定到数据模型，并且您的数据源应该包含一个名为

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>