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容器的名称。注意'matColumnDef'周围缺少[]，这不是绑定。它与您要显示的数据无关，您可以将其命名为任何名称。
<mat-header-cell *matHeaderCellDef> Name </mat-header-cell>：这里没什么了。只需将“名称”替换为您希望在列顶部显示的任何字符串。
放置ng容器的顺序无关紧要。事实上，在这里定义你的ng容器并不意味着它们会被显示出来。是否将显示ng-container以及将以*matHeaderRowDef稍后决定的顺序。
<mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>：在此声明此列中显示为数据的内容。变量'user'在此声明，并且没有明确的数据知识。您可以根据需要为此变量命名。但是被称为'name'的属性必须是绑定到数据源的数据中存在的属性。

<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

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

mat-table总是需要在@Input中使用真正的DataSource。 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">

使用静态数组作为mat-table

2 个答案: