如何解决如何在 Angular Material 表中显示选择列表?
如何在 Angular Material 表中显示选择列表?
错误:
TS2339: Property 'element' does not exist on type 'MyaccountComponent'.
<mat-option *ngFor="let role of element.validRoles" [value]="role.value">
如果我也将 element.validRoles
更改为 validRoles
,我也会收到同样的错误。
组件:
export class MyaccountComponent implements OnInit {
displayedColumns: string[] = ['email','role','rolestatus','validRoles'];
dataSource = [];
ngOnInit(){
this.getAllUsers();
}
constructor(private userService: UserService) { }
getAllUsers(){
const obs = this.userService.getAllRegisteredUsers();
obs.subscribe(data => {
console.log(data.users);
this.dataSource = data.users
});
}
}
模板:
<ng-container matColumnDef="validRoles">
<th mat-header-cell *matHeaderCellDef> Assign Role</th>
<mat-form-field appearance="fill">
<mat-label>Roles</mat-label>
<mat-select>
<mat-option *ngFor="let role of element.validRoles" [value]="role.value">
{{role.viewvalue}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
我的数据格式为:
data.users.validRoles = [
{value: "admin",viewvalue: "Admin"}
];
解决方法
组件上没有名为 element 的属性
用 dataSource.validRoles 替换 element.validRoles
,需要进行一些更改。将选择列表选项数据移至组件,而不是来自后端。
模板也缺少以下几行:
<td mat-cell *matCellDef>
</td>
更新的模板:
<ng-container matColumnDef="validRoles">
<th mat-header-cell *matHeaderCellDef> Assign Role</th>
<td mat-cell *matCellDef>
<mat-form-field appearance="fill">
<mat-label>Roles</mat-label>
<mat-select>
<mat-option *ngFor="let role of validRoles" [value]="role.value">
{{role.viewvalue}}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。