Angular Material Table 不显示任何数据

Question

我需要合并来自 4 个不同端点的数据以创建将显示在 angular material table 中的 ListElement。我可以在日志中看到正确的数据，但 table 仍然是空的。如果我添加条件：“data.data.length > 0”它只显示 1 行，“data.data.length > 1”只显示 2 行等

构造函数包括嵌套订阅，这可能不是最佳解决方案，但我不确定当每个订阅都依赖于前一个订阅时如何使用 forkJoin、mergeMap 等。

这是组件构造函数：

  constructor(injected services...) {
this.userId = this.tokenStorageService.getCurrentUserId();
this.isLoading = true;

let getAllBookingsParams = new GetAllBookingsParams();
getAllBookingsParams.userId = this.userId;

this.bookingsService
  .getAll(getAllBookingsParams)
  .toPromise()
  .then((bookings) => {
    let permData = [];
    bookings.forEach((booking) => {
      this.propertiesService
        .get(booking.propertyId)
        .subscribe((property) => {
          this.citiesService.get(property.cityId).subscribe((city) => {
            this.propertyImagesService
              .getAll(property.id)
              .subscribe((images) => {
                let listElement = new BookingsListElement();
                # initialize listElement with data from above
                permData.push(listElement);
              });
          });
        });
    });

    this.data = new MatTableDataSource(permData);
    this.data.data = permData;
    console.log(this.data);
    this.isLoading = false;
  });

}

这是我的 html 页面：

<div *ngIf="!isLoading">
<table *ngIf="data"      <------- If I add another condition: "data.data > 0" it shows only 1 row, "data.data > 1" shows only 2 etc.
mat-table
[dataSource]="data"
multiTemplateDataRows
class="mat-elevation-z8">
<ng-container
  matColumnDef="{{ column }}"
  *ngFor="let column of columnsToDisplay"
>
  <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
  <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
</ng-container>

<ng-container matColumnDef="expandedDetail">
  <td
    mat-cell
    *matCellDef="let element"
    [attr.colspan]="columnsToDisplay.length"
  >
    <div
      class="example-element-detail"
      [@detailExpand]="
        element == expandedElement ? 'expanded' : 'collapsed'
      "
    >
      <div class="example-element-diagram">
        <div *ngIf="element.imageUrl" class="example-element-image">
          <img [src]="element.imageUrl" />
        </div>
      </div>
      <div class="example-element-content">
        <div class="example-element-description">
          {{ element.propertyName }}
        </div>
        <div class="example-element-description">
          <span class="example-element-description-attribution"
            >{{ element.address }}, {{ element.city }}</span
          >
        </div>
        <div class="example-element-description">
          {{ element.description }}
        </div>
        <div class="example-element-description">
          Accommodates number:
          {{ element.accommodatesNumber }}
        </div>
        <div class="example-element-description">
          Bathroom number:
          {{ element.bathroomNumber }}
        </div>
        <div class="example-element-description">
          Bedroom number:
          {{ element.bedroomNumber }}
        </div>
      </div>
      <div class="example-element-diagram">
        <button
          mat-raised-button
          color="primary"
          [routerLink]="['/properties/details', element.propertyId]"
        >
          Property details
        </button>
        <br />
        <button
          *ngIf="!element.cancellationDate"
          mat-raised-button
          color="warn"
          (click)="cancelBooking(element.id)"
        >
          Cancel booking
        </button>
        <br />
        <button
          *ngIf="element.cancellationDate"
          mat-raised-button
          color="warn"
          disabled
        >
          Booking cancelled {{ element.cancellationDate | date }}
        </button>
      </div>
    </div>
  </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr
  mat-row
  *matRowDef="let element; columns: columnsToDisplay"
  class="example-element-row"
  [class.example-expanded-row]="expandedElement === element"
  (click)="expandedElement = expandedElement === element ? null : element"
></tr>
<tr
  mat-row
  *matRowDef="let row; columns: ['expandedDetail']"
  class="example-detail-row"
></tr>

Answer 1

您似乎将 permData 的值分配给了 this.data，但是在 return 订阅 permData 所需的各自值之前已完成此分配.

如果将数据转换为可观察数据，您可以在模板中使用异步管道让 Angular 处理其余部分。

Angular Material Table 不显示任何数据

Angular Material Table doesn't display any data

typescript

angular-material

angular

angular-material-table