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

Using a static array as datasource for mat-table

提问by Nicolas

I'm trying to make use of the Angular Material table. I'm trying to use the same code as the examples they have but I tin into a problem when I have to define the [dataSource]="data".

我正在尝试使用Angular Material table。我正在尝试使用与他们拥有的示例相同的代码，但是当我必须定义[dataSource]="data".

This question may sound stupid but my table data is a simple array of objects, how can I implement that?

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

for the sake of explaining let's say my data looks like this:

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

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

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

Here's the code I currently have:

这是我目前拥有的代码：

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

回答by AirLancer

I found the provided instructions on Angular Material Tablerather lacking. Maybe I can help clarify the provided examples.

我发现Angular Material Table 上提供的说明相当缺乏。也许我可以帮助澄清提供的例子。

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

• [dataSource]=”dataSource”: This is your actual data array or data source containing the information you want to display. In your case just 'data'.

• You do n?o?t? need to instantiate a new DataSource as mentioned in Pierre Mallet's answer, an array will suffice. But if you wanted to do that, the simplest way would be (sticking with the names from your example):

  public dataSource = new MatTableDataSource(this.data);

  • Benefits of using/extending the type DataSource are listed herein the documentation.

• [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": This is just a name to identify this ng-container. Notice the lack of [] around 'matColumnDef', this is not a binding. It is not related to the data you want to display, you may name it anything you want.

• <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>: Not much going on here. Just replace 'Name' with any string you wish to be displayed on top of the column.

• The order in which you place your ng-containers does not matter. In fact, defining your ng-containers here does not mean they will be displayed at all. Whether a ng-container will be displayed at all and in which order will be decided later with *matHeaderRowDef.

• <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>: Here you declare what is being displayed as data in this column. The variable 'user' is declared h?e?r?e? and has no explicit knowledge of your data. You could name this variable anything you want. But the property being called i.e. 'name' must be a property that exists in the data you bound to the datasource.

• 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>：在此声明在此列中显示为数据的内容。变量 'user' 被声明为 h?e?r?e? 并且对您的数据没有明确的了解。你可以随意命名这个变量。但是被调用的属性，即“名称”必须是您绑定到数据源的数据中存在的属性。

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

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

• *matHeaderRowDef="columnsToDisplay": This is responsible for determining which of the ng-containers headers will be displayed. 'columnsToDisplay' is a string array containing the names you gave the ng-containers as identifiers. The order in which you place the identifiers in this array determines the order in which the column headers appear. If you ommit the identifier of an ng-container, that container won't be displayed.

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

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

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

• Displays the rows in the corresponding columns. Except for 'columnsToDisplay' the variables are declared here.

• 显示相应列中的行。除了 'columnsToDisplay' 变量在此处声明。

回答by Pierre Mallet

even if you use static datas you will have to instantiate a new DataSource.

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

mat-table always need a real DataSource in @Input. DataSource is an abstract class, so you have to implement a class who inherit from DataSource.

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

This DataSource must have a method "connect" implemented which will return an Observable of the data you want to display.

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

So in your case something like that should work ;

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

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