Таблица данных углового материала без отображения строки - PullRequest
Новая
       14

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

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

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

Вот мой код.

Component.html

<div class="row mt-5 mat-elevation-z8">
    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
    <table mat-table [dataSource]="dataSource" matSort>
        <!-- ID Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
          <td mat-cell *matCellDef="let row"> {{row.id}} </td>
        </ng-container>

        <!-- Generated Number Column -->
        <ng-container matColumnDef="generated_no">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Generated Number </th>
          <td mat-cell *matCellDef="let row"> {{row.generated_no}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
          <td mat-cell *matCellDef="let row"> {{row.name}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;">
        </tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

Component.ts

export class CouponComponent implements OnInit {
  coupons: Coupon[] = [];

  displayedColumns = ['id', 'generated_no', 'name'];
  dataSource: MatTableDataSource<Coupon>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(
    private couponService: CouponService,
    private formBuilder: FormBuilder
  ) { 
    this.dataSource = new MatTableDataSource(this.coupons)
  }

  ngOnInit() {
    this.getCoupons();
  }

  getCoupons(): void {
    this.couponService.getCoupons()
    .subscribe(coupons => this.dataSource.data = coupons);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

и выводом является только то, что нумерация страниц имеет номер, но в таблице нет отображаемых строк. enter image description here

Я забыл включить что-то ??

EDIT:

Фильтр тоже работает, если я что-то набираю в фильтре, число в пагинации меняется, значит, мой dataSource не пустой.

Это содержимое HTML

enter image description here

ДРУГОЕ РЕДАКТИРОВАНИЕ

Посмотрев на этот пример Таблица данных Я обнаружил, что он использует зависимость 6.0.0 Так что я запускаю npm update в каталог своего проекта, чтобы обновить и мои зависимости, и здесь это выглядит так.

package.json

package.json

но во время работы ng serve я сталкиваюсь с этой ошибкой.

Output

1 Ответ

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

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

getCoupons(): void {
  this.couponService.getCoupons()
  .subscribe(coupons => {
    this.dataSource.data = coupons;
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.ref.markForCheck();
  });
}

импортировать ChangeDetectorRef и включить его в свой конструктор (частный ref: ChangeDetectorRef)

Надеюсь, это поможет.

...