Таблица данных не показывает мой массив источников данных - PullRequest
Новая
       53

Таблица данных не показывает мой массив источников данных

0 голосов
/ 10 февраля 2019

У меня проблема в том, что я не знаю, как решить ее из своего компонента. Я отправляю массив Resource, чтобы другой компонент считывал его и вставлял в DataSource, который читается мат-таблицей.Ознакомившись с документацией Angular, я вижу, что это правильно.Я не знаю, если это что-то в HTML, что не позволяет мне увидеть это.Может кто-нибудь сказать мне причину?

Большое спасибо

my .ts 

 @Input() resources : Resource [];

public dataSource = new MatTableDataSource <Resource> ();
public ngOnInit(): void {
        console.log(this.resources)
        this.dataSource.data = this.resources
   }

my .html 

<mat-table class="resources-table" #table [dataSource]="resources" matSort [@animateStagger]="{value:'50'}" fusePerfectScrollbar>

    <!-- ID Column -->
    <ng-container matColumnDef="_id">
        <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
        <mat-cell *matCellDef="let resource">
            <p class="text-truncate">{{resource._id}}</p>
        </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'RESOURCE.NAME' | translate}}</mat-header-cell>
        <mat-cell *matCellDef="let resource">
            <p class="text-truncate">{{resource.name}}</p>
        </mat-cell>
    </ng-container>
</mat-table>

console.log(this.resources)img:

enter image description here

1 Ответ

0 голосов
/ 10 февраля 2019

Попробуйте установить DataSource свойство Mat-Table, в котором вы вводите данные:

HTML-код: 

                                    \/ <-- Here
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

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

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

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

Код TS: 

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample implements OnInit {
  displayedColumns: string[] = ['_id', 'name'];
  dataSource = new MatTableDataSource([]);

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    var elements = [{ _id: 1, name: 'Paul Walker' },
    { _id: 2, name: 'Lisa' }];

    this.dataSource = new MatTableDataSource(elements); // Set dataSource  like this 
    this.dataSource.sort = this.sort; // and then assign sort
  }
}

Stackblitz

...