可扩展数据表上的 Angular 7 材料错误

Question

我正在努力解决以下问题：

我希望我的发票表格可以像 https://v7.material.angular.io/components/table/examples 一样展开（滚动到带有可展开行的表格）

当我复制粘贴完全相同的代码时，它工作得非常好。但是当我尝试将此代码应用于我的发票组件时，我会收到以下错误：

错误：只有一个默认行没有 when 谓词函数。 在 getTableMultipleDefaultRowDefsError

我的 .html 代码：

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<table mat-table [dataSource]="dataSource" mutliTemplateDataRows>
  <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let invoice"> {{invoice[column]}} </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let invoice" [attr.colspan]="displayedColumns.length">
      <div [@detailExpand]="invoice == expandedElement ? 'expanded' : 'collapsed'">
        THIS IS WHAT I WANT TO SHOW WHEN EXPANDED
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let invoice; columns: displayedColumns;"
    (click)="expandedElement = expandedElement === invoice ? null : invoice">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

这与Angular材料网站上的教程基本相同：

<table mat-table
       [dataSource]="dataSource" 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>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <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 class="example-element-position"> {{element.position}} </div>
          <div class="example-element-symbol"> {{element.symbol}} </div>
          <div class="example-element-name"> {{element.name}} </div>
          <div class="example-element-weight"> {{element.weight}} </div>
        </div>
        <div class="example-element-description">
          {{element.description}}
          <span class="example-element-description-attribution"> -- Wikipedia </span>
        </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>
</table>

那么为什么我在自己的 invoices.html 文件中出现错误，而不是在本教程的示例中？ 在这两个代码中，我有相同的<tr> 逻辑，对吗？ 此外，当我删除最后两个 <tr> 行之一时，错误消失了。

这是我在 invoices.component 中的代码：

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { Invoice } from './invoice';
import { invoiceService } from './invoice.service';
import { animate, state, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-invoices',
  templateUrl: './invoices.component.html',
  styleUrls: ['./invoices.component.scss'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', display: 'none' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})

export class InvoicesComponent implements OnInit {

  displayedColumns: string[] = ['reference', 'shipmentCosts', 'expectedShipmentCosts', 'containerCosts', 'expectedContainerCosts', 'shipmentDifference', 'containerDifference'];
  expandedElement: Invoice | null;
  incorrectInvoices: Invoice[] = [];
  dataSource = new MatTableDataSource();

  constructor(private invoiceService: invoiceService) { }

  ngOnInit() {
    this.invoiceService.getIncorrectInvoices().subscribe(data => {
      this.incorrectInvoices = data;
      this.dataSource.data = this.incorrectInvoices
    });
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

}

希望有人可以帮助我！

Answer 1

感谢 Nexaddo 的评论，我找到了原因。 mutliTemplateDataRows 中的错字应为 multiTemplateDataRows