使用静态数组作为 mat-table 的数据源

Question

我正在尝试使用Angular Material table。我正在尝试使用与他们的示例相同的代码，但是当我必须定义 [dataSource]="data" 时会遇到问题。

这个问题可能听起来很愚蠢，但我的表数据是一个简单的对象数组，我该如何实现呢？

为了便于解释，假设我的数据如下所示：

public data = [{ ID: 1, Code: "Hi" }, { ID: 2, Code: "Bye" }];

这是我目前拥有的代码：

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="data">
        <ng-container matColumnDef="number">
            <mat-header-cell *matHeaderCellDef> Number </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{ row.ID }} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="Code">
            <mat-header-cell *matHeaderCellDef> Code </mat-header-cell>
            <mat-cell *matCellDef="let row">{{row.Code}}</mat-cell>
        </ng-container>

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

Answer 1

我发现provided instructions on Angular Material Table 相当缺乏。也许我可以帮助澄清提供的示例。

<mat-table [dataSource]=”dataSource”>
  ...
</mat-table>

• [dataSource]=”dataSource”：这是您的实际数据数组或数据源，其中包含您要显示的信息。在您的情况下，只是“数据”。

• 你不需要像Pierre Mallet's answer中提到的那样实例化一个新的DataSource，一个数组就足够了。但是，如果您想这样做，最简单的方法是（坚持使用示例中的名称）：

  public dataSource = new MatTableDataSource(this.data);

  • 文档中列出了使用/扩展类型 DataSource 的好处here。

<ng-container matColumnDef="userName">
  <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
  <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
</ng-container>

• matColumnDef="userName"：这只是标识这个 ng-container 的名称。注意'matColumnDef'周围缺少[]，这不是绑定。它与您要显示的数据无关，您可以随意命名。

• <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>：这里没有太多进展。只需将“名称”替换为您希望在列顶部显示的任何字符串。

• 放置 ng 容器的顺序无关紧要。事实上，在这里定义你的 ng-containers 并不意味着它们会被显示出来。是否显示 ng-container 以及显示顺序将在稍后使用*matHeaderRowDef 决定。

• <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>：在此声明在此列中显示为数据的内容。变量“用户”被声明为 h̲e̲r̲e̲，并且对您的数据没有明确的了解。你可以随意命名这个变量。但是被调用的属性，即“名称”必须是您绑定到数据源的数据中存在的属性。

<mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>

• *matHeaderRowDef="columnsToDisplay"：这负责确定将显示哪些 ng-containers 标头。 'columnsToDisplay' 是一个字符串数组，其中包含您为 ng-containers 提供的名称作为标识符。您在此数组中放置标识符的顺序决定了列标题出现的顺序。如果省略 ng-container 的标识符，则不会显示该容器。

<mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></mat-row>

• 显示相应列中的行。除了 'columnsToDisplay' 变量都在这里声明。

Answer 2

即使您使用静态数据，您也必须实例化一个新的数据源。

mat-table 在@Input 中总是需要一个真正的 DataSource。 DataSource是一个抽象类，所以你必须实现一个继承自DataSource的类。

这个数据源必须有一个实现的方法“connect”，它将返回一个你想要显示的数据的 Observable。

所以在你的情况下，这样的事情应该有效；

// in your component

interface MyDataType {
    ID: number;
    Code: string;
}

export class StaticDataSource extends DataSource<MyDataType> {
  constructor(private staticData: MyDataType[]) {
    super();
  }

  connect(): Observable<MyDataType[]> {
    return Observable.of(this.staticData);
  }

  disconnect() {}
}
...
this.staticDataSource = new StaticDataSource(data);

// in your template
 <mat-table #table [dataSource]="staticDataSource">