观察者订阅不会将数据加载到数据源，使用 material table Angular

Question

我正在使用 Angular material table 但数据源没有在我的屏幕上显示任何数据。我有一个 add-person 组件，它在 'ContactsList: Contacts[];' 中加载一些数据我使用 api 将数据 return 到 ContactsList 并希望将数据加载到数据源中以显示数据material table, 然而, 没有数据显示在屏幕上..

如何加载数据源上的数据 material table?

添加-person.component.ts


  //public ContList: Observable<Contacts>;
  ContactsList: Contacts[];
  personId: number;
  displayedColumns = ['person_contact_ID', 'media', 'actionsColumn'];
  constructor(private _avRoute: ActivatedRoute,
    private _personService: TestRDB2Service, private _router: Router,
    private store: Store<AppState>, private personValidator: ValidatorService) {
    if (this._avRoute.snapshot.params['id']) {
      this.personId = this._avRoute.snapshot.params['id'];
    }
}

 //@Input() personList 
 //@Input() NewContactsList:Contacts[];
  @Output() NewContactsListChange = new EventEmitter<Contacts[]>();
  dataSource: TableDataSource<Contacts>;


  ngOnInit() {
this._personService.GetPerson_ContactList(this.personId).subscribe(
      (data: Contacts[]) => this.ContactsList = data
    );
    this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts);
    this.dataSource.datasourceSubject.subscribe(ContactsList => this.NewContactsListChange.emit(this.ContactsList));
  }

添加-person.component.html

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="person_contact_ID">
    <mat-header-cell *matHeaderCellDef> Person Contact ID </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
        <input [(ngModel)]="row.currentData.person_contact_ID" placeholder="Person Contact ID" [disabled]="!row.editing" matInput>
      </mat-form-field>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="media">
    <mat-header-cell *matHeaderCellDef> Media </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-form-field floatLabel="{{ row.editing ? 'float' : 'never'}}">
        <input [(ngModel)]="row.currentData.media" placeholder="Media" [disabled]="!row.editing" matInput>
      </mat-form-field>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="actionsColumn">
  <mat-header-row *matHeaderRowDef="displayedColumn
s"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Answer 1

您正在尝试在订阅之外分配 this.dataSource，其值将在不等待订阅 return 响应的情况下设置。

所以当您调用 this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts); 时，变量 this.ContactsList 将为空。

尝试更改：

ngOnInit() {
this._personService.GetPerson_ContactList(this.personId).subscribe(
      (data: Contacts[]) => this.ContactsList = data
    );
    this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts);
    this.dataSource.datasourceSubject.subscribe(ContactsList => this.NewContactsListChange.emit(this.ContactsList));
  }

至：

ngOnInit() {
  this._personService.GetPerson_ContactList(this.personId).subscribe(
    (data: Contacts[]) => {
      this.ContactsList = data
      this.dataSource = new TableDataSource<any>(this.ContactsList, Contacts);
      this.dataSource.datasourceSubject.subscribe(ContactsList => this.NewContactsListChange.emit(this.ContactsList));
    }
  );
}```

观察者订阅不会将数据加载到数据源，使用 material table Angular

Observer subscribe doesn't load the data to dataSource, using material table Angular

datasource

angular

观察者订阅不会将数​​据加载到数据源，使用 material table Angular

Observer subscribe doesn't load the data to dataSource, using material table Angular

datasource

angular

观察者订阅不会将数据加载到数据源，使用 material table Angular