如何在 Angular Material table 中显示 select 列表？

Question

错误：

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"}
];

Answer 1

组件上没有属性命名元素

将element.validRoles替换为dataSource.validRoles

Answer 2

需要进行一些更改。将 select 列表选项数据移至组件，而不是来自后端。

模板还缺少这些行：

<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>

如何在 Angular Material table 中显示 select 列表？

How can I display a select list within an Angular Material table?

angular

angular-material

angular-material-table