我正在为角色和权限编写代码，当管理员单击下一个组件上的角色时，将显示具有我使用 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);
}
}
请分享你对此的想法