Использование статического массива в качестве источника данных для таблицы mat

Question

Я пытаюсь использовать таблицу угловых материалов. Я пытаюсь использовать тот же код, что и в примерах, но я сталкиваюсь с проблемой, когда мне нужно определить [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”: Это ваш фактический массив данных или источник данных, содержащий информацию, которую вы хотите отобразить. В вашем случае просто "данные".

• Вам не нужно создавать новый источник данных, как указано в ответе Пьера Маллета, достаточно массива. Но если вы хотите сделать это, самый простой способ (придерживаясь имен из вашего примера):

  public dataSource = new MatTableDataSource(this.data);

  • Преимущества использования / расширения типа DataSource перечислены здесь в документации.

<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-контейнер и в каком порядке будет решаться позже *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-контейнеров будет отображаться. 'columnsToDisplay' - строковый массив, содержащий имена, которые вы дали ng-контейнерам в качестве идентификаторов. Порядок расположения идентификаторов в этом массиве определяет порядок появления заголовков столбцов. Если вы опустите идентификатор ng-контейнера, этот контейнер не будет отображаться.

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

• Отображает строки в соответствующих столбцах. За исключением 'columnsToDisplay' переменные объявлены здесь.

Answer 2

Даже если вы используете статические данные, вам придется создавать новый источник данных.

mat-table всегда нужен реальный источник данных в @Input. 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">