Таблица угловых материалов 5 не показывает данные - PullRequest
0 голосов
/ 18 мая 2018

Hy, я работаю над веб-приложением в angular 5 .В этом приложении мы используем угловой материал.На одной из страниц у нас есть мат-таблица, но мы не можем заставить ее работать.Таблица никогда не показывает нам никаких данных.Данные, которые мы вызываем из нескольких бэкэндов и с помощью отладчика, мы знаем, что данные не равны нулю.Даже если мы попытаемся использовать пример углового материала, он все равно не сработает.Что мы не правы?

HTML

  <mat-table #invoiceTable [dataSource]="datasource" matSort>
    <ng-container matColumnDef="SerialNr">
      <th mat-header-cell *matHeaderCellDef> SerialNr. </th>
      <td mat-cell *matCellDef="let movement" > {{movement?.serialNr}} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
    </tr>
  </mat-table>

TS

displayedColumns = ['SerialNr'];
movements = [];
// datasource = new MatTableDataSource<Movement>(this.movements);
datasource: MovementDataSource;

  getMovementsByVehicleID() {
 this.authUser.ownedVehicles.forEach((vehicle) => {
    this.movementService.getMovementsByCarID(vehicle.id).subscribe(
      (newMovemnts) => {
        this.movements = newMovemnts;
        this.datasource.update(newMovemnts);
      },
    );
  }
);
}




export class MovementDataSource extends DataSource<Movement> {

constructor(private movements: Movement[]) {
  super();
}

connect(): Observable<Movement[]> {
  return Observable.of(this.movements);
}

update(movements: Movement[]) {
  movements.forEach((move) => {
    this.movements.push(move);
  });
}

   disconnect(collectionViewer: CollectionViewer): void {
   }
}

MATERIAL.TS

@NgModule({
  imports: [
    MatButtonModule,
    MatToolbarModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatCardModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    CdkTableModule,
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatMenuModule,
    MatPaginatorModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatCardModule,
    MatTableModule,
    MatSortModule,
    MatProgressSpinnerModule,
    CdkTableModule
  ],
  declarations: []
})
export class MaterialModule {
}

Мы много чего перепробовали.это последняя версия, но она все еще не работает.Конечно, мы добавили модуль материала в импорт app.module.ts.Странно то, что даже примеры не работают.Есть идеи?

Я обновил свой вопрос.Это все еще не работает

Ответы [ 2 ]

0 голосов
/ 24 января 2019

У меня была та же проблема, и я забыл вызвать метод renderRows () при обновлении асинхронных данных.См. Документацию таблицы материалов Angular 5 https://v5.material.angular.io/components/table/overview.

Этот ответ дал мне вдохновение: Вызов метода renderRows () для таблицы угловых материалов

0 голосов
/ 20 мая 2018

По документации Таблица |Угловой материал ,

  1. <th mat-header-cell *matHeaderCellDef> SerialNr. </th> должен быть частью контейнера ng согласно документации.Пробовал без него и таблицу не рендерит. В вашем случае это отсутствует .
  2. displayedColumns должен быть массивом строк, который содержит столбцы, которые необходимо отобразить. Я вижу, что это также отсутствует в вашем component.ts .В вашем случае это должно быть displayedColumns = ['SerialNr'];

Остальное все выглядит отлично.

Разветвленный существующий пример на stackblitz

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