Angular Таблица материалов без каких-либо данных - PullRequest
Новая
       0

Angular Таблица материалов без каких-либо данных

1 голос
/ 09 января 2020

My Angular В таблице материалов не отображаются никакие данные. Это также не бросает никаких исключений и не делает ничего странного. Я уже прочитал несколько других сообщений stackoverflow, но не смог найти ничего полезного.

вот что я получаю, когда sortedData содержит 12 объектов вопроса. Как видите, строки отображаются, но не заполнены какими-либо данными

Заранее спасибо!

таблица вопросов. html: 

<div class="mat-elevation-z8">
    <table *ngIf="sortedData!=null" [dataSource]="sortedData" mat-table class="full-width-table" matSort aria-label="Elements">
      <!-- Id Column -->
      <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.id}}</mat-cell>
      </ng-container>

      <!-- Title Column -->
      <ng-container matColumnDef="title">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.title}}</mat-cell>
      </ng-container>
      <!-- Topic Column -->
      <ng-container matColumnDef="topic">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Topic</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.topic}}</mat-cell>
      </ng-container>
    <!-- Subtopic Column -->
      <ng-container matColumnDef="subtopic">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Subtopic</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.subtopic}}</mat-cell>
      </ng-container>
      <!-- Type Column -->
      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
        <mat-cell *matCellDef="let element">{{element.type}}</mat-cell>
      </ng-container>

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

    <mat-paginator #paginator
        [length]="dataSource?.data.length"
        [pageIndex]="0"
        [pageSize]="50"
        [pageSizeOptions]="[25, 50, 100, 250]">
    </mat-paginator>
  </div>

Интерфейс вопроса: 

export interface Question {
  id?: number;
  title?: string;
  demand?: string;
  type?: QuestionType;
  topic?: string;
  subTopic?: string;
  points?: number;
  imgPath?: string;
  marking?: boolean;
  added?: boolean;
}

ngOnInit of вопрос-таблицы.ts: 

ngOnInit() {
      this.questionService.getQuestions().subscribe(data => {
      this.questions = data;
      this.sortedData = this.questions;
      console.log(this.sortedData)
    });   
  }

Ответы [ 2 ]

1 голос
/ 10 января 2020

Вы допускаете ошибки в методе инициализации компонента, а также в просмотре таблицы, см. Мой код ниже 

this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;

Демонстрационный пример для таблицы и закорочения с использованием Angular Материал

1 голос
/ 10 января 2020

Вы хотите отобразить свойство displayColumn, но оно не инициализировано в .ts

Не могли бы вы добавить это и проверить: 

/** Displayed datatable columns */
displayedColumns = ['id', 'title', 'topic', 'subtopic', 'type'];

ngOnInit() {
  this.questionService.getQuestions().subscribe(data => {
    this.questions = data;
    this.sortedData = this.questions;
    console.log(this.sortedData)
  });   
}
...