來自角度材料的 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>