来自角度材料的 Mat-Table 不显示数据

Question

我正在尝试在 mat 表中显示来自 api 的一些数据。 但是，即使我可以在控制台中看到数据，它也不会显示在 mat 表中。 控制台没有显示有关 mat 表的错误，并且列的标题显示正确。

我已经尝试使用 async 关键字在加载其余组件之前获取其余 api 数据。

这是我的组件

@Component({
  selector: 'admin-dashboard',
  templateUrl: './admin.component.html',
  providers: [HTTPService],
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit{
  showForm= false;
  buttonName= "Add User";
  users:User= [];
  tableColumns: string[] = ['name', 'email', 'company', 'phoneNumber', 'enabled', 'status'];

  constructor(private fb: FormBuilder, private http: HTTPService){};

  ngOnInit(){
      this.getUsers();
  }

  async getUsers()
  {
    var arr= await this.http.listUsers().toPromise();
    var i=0;
    while(arr[i])
    {
      this.users.push(arr[i]);
      i++;
    }
    console.log(this.users);

这是html模板

<table mat-table [dataSource]="users">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let user">{{user.name}}</td>
  </ng-container>
  <ng-container  matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef>Email</th>
    <td mat-cell *matCellDef="let user">{{user.email}}</td>
  </ng-container>
  <ng-container  matColumnDef="company">
    <th mat-header-cell *matHeaderCellDef>Company</th>
    <td mat-cell *matCellDef="let user">{{user.company}}</td>
  </ng-container>
  <ng-container  matColumnDef="phoneNumber">
    <th mat-header-cell *matHeaderCellDef>Phone Number</th>
    <td mat-cell *matCellDef="let user">{{user.phoneNumber}}</td>
  </ng-container>
  <ng-container  matColumnDef="enabled">
    <th mat-header-cell *matHeaderCellDef>Enabled</th>
    <td mat-cell *matCellDef="let user">{{user.enabled}}</td>
  </ng-container>
  <ng-container  matColumnDef="status">
    <th mat-header-cell *matHeaderCellDef>Status</th>
    <td mat-cell *matCellDef="let user">{{user.status | lowercase}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: tableColumns"></tr>
</table>

如果需要更多信息，请告诉我，我是 StackOverflow 的新手

Answer 1

尝试使用new MatTableDataSource设置mat-table dataSource ，如下所示。

TS

export class AdminComponent implements OnInit {

    dataSource;

    constructor(...){};

    ngOnInit() {

        this.getUsers();
    }

    async getUsers() {

        const arr = await this.http.listUsers().toPromise();
        let i = 0;
        while(arr[i]) {
            this.users.push(arr[i]);
            i++;
        }
        this.dataSource = new MatTableDataSource<any>(this.users);
    }
}

HTML

<table mat-table [dataSource]="dataSource">
...
</table>