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

问题描述

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

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

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

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

这是我目前拥有的代码:

<mat-table #table [dataSource]="data"><ng-container matColumnDef="number"><mat-h​​eader-cell *matHeaderCellDef>数量</mat-h​​eader-cell><mat-cell *matCellDef="let row">{{ row.ID }} </mat-cell></ng-容器><ng-container matColumnDef="代码"><mat-h​​eader-cell *matHeaderCellDef>代码</mat-h​​eader-cell><mat-cell *matCellDef="let row">{{row.Code}}</mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="let row; columns:displayedColumns;"></mat-row></mat-table>

解决方案

我发现 提供的说明角度材料表相当缺乏.也许我可以帮助澄清所提供的示例.

...</mat-table>

• [dataSource]="dataSource":这是包含要显示的信息的实际数据数组或数据源.在你的情况下只是数据".

• 您确实 n̲o̲t̲ 需要实例化一个新的数据源，如Pierre Mallet 的回答中所述，一个数组就足够了.但是，如果您想这样做，最简单的方法是(坚持使用示例中的名称):

  public dataSource = new MatTableDataSource(this.data);

  • 此处列出了使用/扩展类型 DataSource 的好处 在文档中.

<mat-h​​eader-cell *matHeaderCellDef>名称</mat-h​​eader-cell><mat-cell *matCellDef="let user">{{user.name}} </mat-cell></ng-容器>

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

• 名称</mat-h​​eader-cell>:这里没有太多内容.只需将名称"替换为您希望在列顶部显示的任何字符串.

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

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

<mat-h​​eader-row *matHeaderRowDef="columnsToDisplay"></mat-h​​eader-row>

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

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

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

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

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" }];

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>

解决方案

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

<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 here in the documentation.

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

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

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

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

这篇关于使用静态数组作为 mat-table 的数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！