Так что в вашем случае что-то подобное должно работать;

аюсь использоватьУгловая таблица материалов, Я пытаюсь использовать тот же код, что и примеры, которые у них есть, но я сталкиваюсь с проблемой, когда мне нужно определить[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>
 Patryk Brejdak24 нояб. 2017 г., 11:59
Похоже, вам не хватает метода для сериализации данных для таблицы данных материала, котораяnew MatTableDataSource(data); где данные просто ваш массив

Ответы на вопрос(2)

Я нашелпредоставленные инструкции в таблице угловых материалов скорее не хватает. Может быть, я могу помочь уточнить приведенные примеры.

<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' переменные объявлены здесь.
 nani2198414 мая 2018 г., 23:29
спасибо, это помогло мне решить мою проблему

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

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

Ваш ответ на вопрос