Angular material table и DataSource?

Question

[Алёна Хреновская]

Добрый день! Как к mat-table можно подключить уже готовый массив, полученный из бд?

Answer 1

[Ivan Stroykin]

Допустим есть у нас сервис home.service.ts по которому нам приходит наш массив

public getElementData(): Observable<any[]> {
  return this._httpClient.get('api/test'); // any[]
}

HTML код берем из примера по ссылке

В компоненте home.component.ts объявляем 2 свойства и 1 метод который вызывается в OnInit

public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource;

// constructor ...

ngOnInit(): void {
  this._getElementData();
}

private _getElementData(): void {
  this._homeService.getElementData().subscribe(res => {
    this.dataSource = new MatTableDataSource(res);
  });
}

либо

public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
public dataSource = new MatTableDataSource();

// constructor ...

ngOnInit(): void {
  this._getElementData();
}

private _getElementData(): void {
  this._homeService.getElementData().subscribe(res => {
    this.dataSource.data = res;
  });
}

Получаем в итоге такую картину:


Ну и ссылка с хорошим, всеохватывающим, примером (Angular 5.2 и rxjs 5.5) - stackblitz

Comments

[Алёна Хреновская]

Angular: Can't bind to 'dataSource' since it isn't a known property of 'table'

[Ivan Stroykin]

Алёна Хреновская, Вы точно делаете так же как описал я или как описано в примере?
Потому что по ссылке пример прекрасно работает на версии Angular 5.2, а пример которые описал я - прекрасно работает на Angular 6 с client-side rendering и server-side rendering

[Алёна Хреновская]

Ivan Stroykin, вроде точно:

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Subscription} from 'rxjs/Subscription';

import {ContractsService} from '../shared/services/contracts.service';
import {Contract} from '../shared/models/contracts.model';
import {User} from '../../shared/models/user.model';
import {Job} from '../shared/models/jobs.model';
import {JobsService} from '../shared/services/jobs.service';
import {MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-contract-form',
  templateUrl: './contract-form.component.html',
  styleUrls: ['./contract-form.component.scss']
})
export class ContractFormComponent implements OnInit, OnDestroy {
  user: User;
  contracts: Contract[] = [];
  jobs: Job[] = [];
  contractor: number;
  sub1: Subscription;
  sub2: Subscription;
  public displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  public dataSource = new MatTableDataSource;
  constructor(private contractsService: ContractsService,
              private jobService: JobsService) {
  }

  ngOnInit(): void {
  this.user = JSON.parse(window.localStorage.getItem('user'));
     this.contractor = this.user.id;
     this.sub2 = this.jobService.getAllJobs().subscribe((jobs: Job[]) => {
       this.jobs = jobs;
     });
    this._getElementData();
  }

  private _getElementData(): void {
     this.sub1 = this.contractsService.getContractsByContractor(this.contractor)
       .subscribe((contracts: Contract[]) => {
         contracts.forEach((c) => {
           c.jobName = this.jobs.find(j => j.id === c.job).title;
         });
         this.dataSource.data = contracts;
       });
  }

  ngOnDestroy() {
    if (this.sub1) {
      this.sub1.unsubscribe();
    }
    if (this.sub2) {
      this.sub2.unsubscribe();
    }
  }
}

Ошибку выдает именно здесь, ругается на dataSource

<div class="example-container mat-elevation-z8">
  <table mat-table #table [dataSource]="dataSource">

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

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

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

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

[Ivan Stroykin]

Алёна Хреновская, а если поменять
public dataSource = new MatTableDataSource;
на
public dataSource = new MatTableDataSource();

[Алёна Хреновская]

Ivan Stroykin, если из кода убрать dataSource и поставить this.contracts = contracts;
то все работает с стандартной таблицей. Но условия у меня таковы, что нужна именно mat-table.

[Алёна Хреновская]

Ivan Stroykin, все равнооооо

Вот 100% я ошиблась где-то в нубском, и буду чувствовать себя идиоткой -_- Хотя и так уже.

[Алёна Хреновская]

Ivan Stroykin, нашла ошибку - https://stackoverflow.com/questions/50228138/cant-...

[Ivan Stroykin]

Алёна Хреновская, Да, я писал под 6 версию ) Поэтому прикрепил хороший пример под 5 версию. Удачи Вам в вашем обучении )

[Алёна Хреновская]

Ivan Stroykin, спасибо огромное -_- уже хочется биться головой об стену хД Но, понимаю, что все приходит с опытом. П.с получилось)))

[Алёна Хреновская]

Ivan Stroykin, еще побеспокою, это мне нужно angular/material обновить? поэтому не работало?

[Ivan Stroykin]

Алёна Хреновская, Если я правильно понял, вы пытались использовать селектор, который добавили только в 6 версии Angular Material (mat-table на тэг table). Но чтобы обновиться до 6 версии Angular Material, скорее всего нужно будет и сам Angular обновить до 6 версии. Тут 2 варианта. Либо обращаться в документацию по 5 версии, либо полностью переводить всё на 6 версию

[Алёна Хреновская]

Ivan Stroykin, ну нафиг, я еще не настолько крута : D

[Ivan Stroykin]

Алёна Хреновская, по сути, ничего сложного в переходе с 5 на 6 версию нету. Опыт приходит с практики, удачи Вам в развитии )

[Алёна Хреновская]

Ivan Stroykin, спасибо)