Как динамически передавать данные в источник данных таблицы материалов

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

parent.component.html

<div class="overview">
  <div class="vehicle-img">
    <img src={{vehicleImg}} />
  </div>
  <div class="board">
    <div class="board-column company-overview">
      <div class="board-column-header">{{ "COMPANY_OVERVIEW.TITLE" | translate}}</div>
      <div class="board-column-content">
        <app-company-overview [companyOverviewData]="companyOverviewData"></app-company-overview>
        <div *ngIf="!companyOverviewData" class="loading">
          <app-loading></app-loading>
        </div>
      </div>
    </div>
    <div class="board-column feeds">
      <div class="board-column-header">{{ "FEEDS.TITLE" | translate}}</div>
      <div class="board-column-content">
        <app-feeds [feedsOverviewData ]="feedsOverviewData "></app-feeds>
        <div *ngIf="!feedsData" class="loading">
            <app-loading></app-loading>
      </div>
    </div>
  </div>
</div>

в этом родительском компоненте он вызовет API для получения feedsOverviewData

 this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {
        this.feedsOverviewData = data;
      });

и этот feedsOverviewData будет передаваться в компонент app-feeds, этот компонент также имеет дочерний компонент feeds-list компонент,

<div class="feeds">
  <mat-card class="feed-card">
    <mat-card-title>
      <div class="title">
        <h3>{{ 'FEEDS.SUBTITLE' | translate}} </h3>
        <hr>
      </div>
    </mat-card-title>
    <app-feed-list [feedsOverviewData]="feedsOverviewData"></app-feed-list>
    <div class="comment">
      <textarea class="textarea" matInput placeholder="Enter your comment ..." [(ngModel)]="feedsComment"></textarea>
      <button mat-button [disabled]="!feedsComment">
        <mat-icon class="send-button" matSuffix>send</mat-icon>
      </button>
    </div>
  </mat-card>
</div>

этот компонент списка каналов реализован с помощью таблицы материалов angluar.

<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="feeds">
      <td mat-cell *matCellDef="let item">
        <mat-card-header>
          <div mat-card-avatar>
            <mat-icon class="avatar">insert_emoticon</mat-icon>
          </div>
          <mat-card-title class="feeds-header"><b>
              <!-- <div *ngIf="item.type === 'searchevent'">
                            <span>n-Level {{item.user}}</span>
                        </div> -->
              <div *ngIf="item.comment === 'searchevent'">
                <span>Event</span>
              </div>
            </b>
          </mat-card-title>
          <mat-card-subtitle class="feeds-date">{{item.timestamp | date: 'dd/MM/yyyy'}}</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
          <div *ngIf="item.type !== 'searchevent'">
            <div class="feeds-info">{{item.comment}}</div>
          </div>
          <div *ngIf="item.type === 'searchevent'">
            <div class="feeds-info">FIN search executed by {{item.user}}.</div>
          </div>
        </mat-card-content>
      </td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

а feed-list.ts выглядит примерно так:

export class FeedListComponent implements OnInit {
  displayedColumns: string[] = ['feeds'];
  @Input() feedsOverviewData: Feeds[];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  dataSource = new MatTableDataSource<any>();
  constructor() {
  }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.data = this.feedsOverviewData;
  }
  ngOnChange() {
    console.log(this.feedsOverviewData);
    this.dataSource.data = this.feedsOverviewData;
  }

}

Я пробовал много способов передать эти динамические данные в таблицу, но это не сработало.

У тебя есть какие-либо идеи?

С уважением,

Лео


angular angular-material angular-material-table
person user1938143    schedule 29.03.2019    source источник
comment
Ваша ngOnChange функция никогда не будет выполнена. Полагаю, вы имели в виду крючок жизненного цикла ngOnChanges? Для этого вам также необходимо реализовать интерфейс OnChanges, как вы реализовали OnInit.   -  person Fabian Küng    schedule 11.04.2019

Ответы (1)


arrow_upward
2
arrow_downward

вы можете использовать это так: создать новый источник данных на основе копии данных (для неизменности)

this.dataSource = new MatTableDataSource([...<[whatever incoming data]>);

попробуйте это (для вашего случая)

this.feedsService.getFeedsByVin(this.vin).subscribe((data) => {
        this.feedsOverviewData = [...data];
      });

(аналогичная настройка для ngOnInit)

 ngOnChange() {
    console.log(this.feedsOverviewData);
    this.dataSource = new MatTableDataSource(this.feedsOverviewData);
  }

подписка работает в собственном асинхронном процессе с данными, доступными только там. angular делает некоторые вещи за кулисами, чтобы заставить эту работу работать.

 <app-feed-list [feedsOverviewData]="this.feedsOverviewData"></app-feed-list>
person jcuypers    schedule 29.03.2019
comment
Как мне поставить этот код? в конструкторе или ngOnInit ()? - person user1938143; 29.03.2019
comment
Вы получили какой-нибудь вывод из console.log? - person jcuypers; 29.03.2019
comment
Можете ли вы подтвердить, что получаете данные из подписки. с console.log - person jcuypers; 29.03.2019
comment
да, я могу подтвердить, что получил данные от feedsService. - person user1938143; 29.03.2019
comment
нам нужно сначала установить, что данные передаются дочернему компоненту - person jcuypers; 29.03.2019