Массив объектов как источник данных для таблицы угловых материалов

Question

Мои user данные выглядят так, что вызывает проблемы ...

[{"firstName":"Pinkie","lastName":"Connelly","username":"Darlene.Marvin","email":"Isobel_Renner@hotmail.com"},{"firstName":"Easter","lastName":"Ruecker","username":"Giovani.Collier59","email":"Annamae54@gmail.com"},{"firstName":"Harmon","lastName":"Luettgen","username":"Rosanna51","email":"Moshe98@yahoo.com"},{"firstName":"Angeline","lastName":"Kunze","username":"Gabriel_Braun69","email":"Jackson21@hotmail.com"},{"firstName":"Gayle","lastName":"Bahringer","username":"Dorcas_Roob55","email":"Greyson96@gmail.com"},{"firstName":"Adriana","lastName":"Renner","username":"Serenity.Armstrong42","email":"Sim.Robel@gmail.com"},{"firstName":"Arvid","lastName":"Kiehn","username":"Estrella87","email":"Jaylan_Morissette70@yahoo.com"},{"firstName":"Kristofer","lastName":"Nader","username":"Terence.Walker7","email":"Brady99@hotmail.com"},{"firstName":"Rosa","lastName":"Lebsack","username":"Freida_Hegmann46","email":"Alanna_Schmitt89@hotmail.com"},{"firstName":"Rogers","lastName":"Thiel","username":"Mike_Braun","email":"Agnes.Shields3@gmail.com"}]

Я использую Angular и импортированный материал Angular. Первой проблемой, с которой я столкнулся, было использование *NgFor с этой структурой данных, но, начиная с Angular V6, теперь вы можете использовать keyValue трубу, которая действительно хороша! так что проблема решена.

Я тогда хотел * NgFor в таблицу, чтобы каждый человек заполнял строку. Вы не используете NgFor для таблицы, вместо этого он использует dataSource -

<table mat-table #table [dataSource]="user">
  <!-- table rows -->
</table>

Но опять же ... Provided data source did not match an array, Observable, or DataSource at getTableUnknownDataSourceError

Вот так я получаю user -

export class AppComponent {
  error: any;
  title = 'toms-app';
  user: User;

constructor(private apiServicefile: ApiServicefile) { }


ngOnInit(): void {
  this.apiServicefile.getUser()
    .subscribe(
      (data: User) => this.user = { ...data }, // success path
      error => this.error = error // error path
    );
}
}

Новое в typeScript и как получить желаемый результат. пожалуйста помогите?

Answer 1

this.user не является массивом после:

{ ...data };

Просто сделайте это так:

this.user = data;

Или, кстати, вы можете немного улучшить его, вот так, html:

<table mat-table #table [dataSource]="user | async">
  <!-- table rows -->
</table>

В TS-файле вы являетесь пользователем:

Array<User>

, а не пользователем, но, поскольку мы пишем в html-пользователя с асинхронным каналом, вы можете определить его следующим образом:

Observable<Array<User>> or Observable<User[]>

и назначьте this.apiServicefile.getUser () для этого поля.

export class AppComponent {
  error: any;
  title = 'toms-app';
  user: Observable<Array<User>>;

  constructor(private apiServicefile: ApiServicefile) { }


  ngOnInit(): void {
    this.user = this.apiServicefile.getUser();
  }
}