Мат-стол из угловатых материалов, не отображающий данные

Я пытаюсь отобразить некоторые данные из api в таблице 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


angular angular-material angular-material-table
person Ishan Phadke    schedule 17.07.2019    source источник
comment
не могли бы вы создать stackblitz.   -  person Abhishek    schedule 17.07.2019
comment
Что в результате console.log(this.users)?   -  person ElasticCode    schedule 17.07.2019
comment
@IshanPhadke Я думаю, что все хорошо, проблема в данных. вы не можете предоставить данные для таблицы, потому что, если вы предоставляете статические данные, она работает нормально, вы можете проверить свои данные или HTTPService, что вы можете получить. stackblitz.com/edit/ здесь s ваш код отлично работает со статическими данными.   -  person Abhishek    schedule 17.07.2019
comment
@ElasticCode он правильно распечатывает пользовательские данные из моего api   -  person Ishan Phadke    schedule 17.07.2019
comment
@Abhishek, спасибо, что нашли время сделать stackblitz. Я не уверен, что не так с моей службой HTTP, я получаю нужные пользовательские данные в правильном формате.   -  person Ishan Phadke    schedule 17.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте установить dataSource из mat-table с помощью new MatTableDataSource следующим образом.

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>
person Sudarshana Dayananda    schedule 17.07.2019
comment
Большое спасибо, это исправило. Не могли бы вы сказать мне, почему это имеет значение? Я думал, что функция ввода [dataSource] похожа на директиву * ngFor. - person Ishan Phadke; 17.07.2019