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

Question

我试图利用Angular Material表。我正在尝试使用与示例相同的代码，但是当我必须定义时会遇到问题[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

我发现缺少有关角材料表的说明。也许我可以帮助澄清提供的示例。

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

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

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

  public dataSource = new MatTableDataSource(this.data);

  • 文档中此处列出了使用/扩展数据源类型的好处。

<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容器的名称。注意'matColumnDef'周围缺少[]，这不是绑定。它与您要显示的数据无关，您可以根据需要命名。

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

• 放置ng容器的顺序无关紧要。实际上，在此处定义ng容器并不意味着它们将完全显示。是否会显示ng-container，之后将使用决定顺序*matHeaderRowDef。

• <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>：在这里，您声明在此列中显示为数据的内容。变量'user'被声明为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的类。

该数据源必须实现“connect”方法，该方法将返回要显示的数据的可观察对象。

所以在你的情况下，类似的东西应该有效；

// 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">