角材料可扩展表行不起作用

Question

我正在尝试实现可扩展表行。 OrderDatasource如下所示：

export class OrderDataSource implements DataSource<Order> {
    private ordersSubject = new BehaviorSubject<Order[]>([]);
    private loadingSubject = new BehaviorSubject<boolean>(false);
    public loading$ = this.loadingSubject.asObservable();
    constructor(private orderService: OrderService) {}
    loadOrders(pageIndex: number,
                pageSize: number) {
                    const rows = [];
        this.loadingSubject.next(true);
        this.orderService.getOrders(pageIndex, pageSize).pipe(
                catchError(() => of([])),
                finalize(() => this.loadingSubject.next(false))
            )
            .subscribe(orders => {
                orders.forEach((element, i) => {
                    rows.push(element, { detailRow: true, element });
                });
                console.log(rows);
                this.ordersSubject.next(rows);
            });
    }
    connect(collectionViewer: CollectionViewer): Observable<Order[]> {
        console.log('Connecting data source');
        return this.ordersSubject.asObservable();
    }
    disconnect(collectionViewer: CollectionViewer): void {
        this.ordersSubject.complete();
        this.loadingSubject.complete();
    }
}

该表的代码如下：

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource" matSort matSortActive="seqNo" 
  matSortDirection="asc" matSortDisableClear>
    <ng-container matColumnDef="orderId">
      <mat-header-cell *matHeaderCellDef> Order No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.orderId}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="orderStatus">
      <mat-header-cell *matHeaderCellDef> Order Status </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.orderStatus}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="customerName">
      <mat-header-cell *matHeaderCellDef> Customer Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.customer.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="customerAddress">
      <mat-header-cell *matHeaderCellDef> Customer Address </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.customer.postalAddress}} </mat-cell>
    </ng-container>
    <!-- Expanded Content Column - The detail row is made up of this one column -->
    <ng-container matColumnDef="expandedDetail">
        <mat-header-cell *matHeaderCellDef> </mat-header-cell>
        <mat-cell *matCellDef="let detail"> 
            <app-order-item  [displayHeading]="true" [orderItems]="detail.element.orderItemList"></app-order-item>
        </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"
              matRipple 
              class="element-row" 
              [class.expanded]="expandedElement == row"
              (click)="expandedElement == row? expandedElement = null : expandedElement = row"></mat-row>

      <mat-row *matRowDef="let row; columns: ['expandedDetail']; when: isExpansionDetailRow"
              [@detailExpand]="row == expandedElement ? 'expanded' : 'collapsed'"
              style="overflow: hidden"> 
      </mat-row>
  </mat-table>
  <mat-paginator [length]="10" [pageSize]="3"
                   [pageSizeOptions]="[3, 5, 10]"></mat-paginator>
</div>

OrderItemComponent如下：

export class OrderItemComponent implements OnInit {

  @Input() orderItems: OrderItem[];
  @Input() displayHeading = false;
  displayedColumns = ['name', 'price', 'quantity', 'type'];
  dataSource: MatTableDataSource<OrderItem>;
  ngOnInit() {
    if (this.areOrderItemsValid(this.orderItems)) {
      console.log(this.orderItems);
      this.dataSource = new MatTableDataSource(this.orderItems);
    }
  }
  areOrderItemsValid(orderItems: OrderItem[]): boolean {
    return typeof orderItems !== 'undefined' && orderItems != null && orderItems.length > 0;
  }
}

OrderItemComponent的HTML代码如下：

<ng-container *ngIf="areOrderItemsValid(orderItems)">

  <h4 *ngIf="displayHeading" class="center">Order list:</h4>

  <mat-table class="orderItems-table" [dataSource]="dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.product.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="price">
      <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.price}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="quantity">
      <mat-header-cell *matHeaderCellDef> Quantity </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.quantity}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="type">
      <mat-header-cell *matHeaderCellDef>Type </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.property.propertyName}} : {{row.property.propertyValue}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

</ng-container>

问题是，当我将[class.expanded] =“ expandedElement == row”条件更改为[class.expanded] =“ expandedElement！= row时，这里的OrderItemComponent的明细表无法显示所有的OrderItemComponent都会显示出来，这表明数据流正常工作。但是，当我将条件更改回原始条件（[class.expanded] =“ expandedElement == row”）时，OrderItemComponent组件不可见。怎么了？