使用静态数组作为mat-table的数据源 [英] Using a static array as datasource for mat-table

问题描述

我正在尝试使用角度材料表.我正在尝试使用与示例相同的代码，但是在必须定义[dataSource]="data"时出现问题.

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:这是包含要显示信息的实际数据阵列或数据源.就您而言，只是数据".

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

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

      • 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>:这里没什么大不了的.只需将名称"替换为您希望在列顶部显示的任何字符串.

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

        放置ng容器的顺序无关紧要.实际上，在此处定义ng容器并不意味着它们将完全显示.

      是否会显示ng-container，以及以后将按哪个顺序显示.

      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>:在此声明在此列中显示为数据的内容.变量"user"被声明为h̲e̲r̲e̲，并且对您的数据没有明确的了解.您可以根据需要命名该变量.但是被称为名称"的属性必须是绑定到数据源的数据中存在的属性.

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

      • 显示相应列中的行.除了'columnsToDisplay'以外，其他变量都在这里声明.

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