角度材料表不显示任何数据

如何解决角度材料表不显示任何数据

我需要合并来自 4 个不同端点的数据以创建一个将显示在有角度的材料表中的 ListElement。 我可以在日志中看到正确的数据，但表格仍然是空的。如果我添加条件：“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>

解决方法

您似乎将 permData 的值分配给了 this.data，但是在订阅返回 permData 所需的相应值之前已达到此分配。

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