角材料表不显示任何数据

Posted 2023-03-13

【中文标题】角材料表不显示任何数据

【英文标题】：Angular Material Table doesn't display any data

【发布时间】：2021-05-08 00:12:03

【问题描述】：

我需要合并来自 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>

【参考方案1】：

您似乎将permData 的值分配给this.data，但是在订阅返回它们各自的permData 所需的值之前就已完成此分配。

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