Не удается отобразить компонент таблицы угловых материалов

Question

Я пытался следовать учебному пособию по компонентам таблицы угловых материалов здесь

Я смог почти точно следовать учебному пособию, за исключением необходимости использовать коврик-table tag вместо тега table с директивой mat-table, что, как представляется, общая проблема .

Репозиторий, воспроизводящий проблему, можно найти здесь:

git clone https://github.com/Atticus29/stackoverflowTable.git
cd stackoverflowTable/
npm install
ng serve

Перейдите к http://localhost:4200/ в своем браузере.

Кто-нибудь знает, почему таблица не появляется?В консоли нет ошибок.

Я использую более старые стабильные версии нескольких зависимостей, потому что были некоторые доказательства того, что самые последние версии могут быть проблемой .

Соответствующий отрывок из package.json:

  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.11",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

Обновление 3 июня 2018 года: у меня есть рабочий пример в ветви решения того же репо.

Answer 1

В вашем коде вы объявили источник данных в TableBasicExample.Я понятия не имею, почему вы это сделали, вместо этого вы должны объявить источник данных следующим образом:

export class AppComponent {
  displayedColumns = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

Также в html нет необходимости использовать табличные теги, такие как tr, td.

  <ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>>