проблема с вызовом renderRow () для mat-таблицы - PullRequest
Новая
       10

проблема с вызовом renderRow () для mat-таблицы

0 голосов
/ 27 апреля 2018

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

Вот некоторые важные слова из моего кода: 

<div fxFlex="20%" fxLayout="row" fxLayoutAlign="center">
        <input fxFlex="10%" matInput placeholder="Part #" type="number" [(ngModel)]="partNumber">
        <input fxFlex="20%" matInput placeholder="Video Url" type="text" [(ngModel)]="videoUrl">
        <input fxFlex="40%" matInput placeholder="Download Url" type="text" [(ngModel)]="downloadUrl">
        <button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo()"> <-- I would like my table to update on this click
            Add Video
        </button>
    </div>
    <div *ngIf="urlCollection.length > 0">
        <mat-table #videoTable videoTable [dataSource]="dataSource">

            <-- Table columns -->

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

На стороне TS вещей: 

addVideo()
{
  // get data from the the inputs and add it to the table data collection;
 // Ideally I would like to have the renderRow here. 
}

Я попытался вызвать renderRows () в событии нажатия кнопки, например: 

<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.renderRows()">

И вот так: 

<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.table.renderRows()">

Я получаю ошибку, которая выглядит примерно так: «Невозможно вызвать renderRow () для неопределенного» * ​​1015 *

Я пытался вызвать метод renderRows () в моем методе машинописи следующим образом: 

@ViewChild('videoTable') videoTable: MatTableModule;
// rest of the component

addVideo()
{
    // add to the datasource collection
    this.videoTable.renderRows();
}

Я получаю сообщение об ошибке «Свойство renderRows» не существует для типа «MatTableModule».

Как мне обновить таблицу, когда я нажимаю кнопку и обновляю источник данных?

1 Ответ

0 голосов
/ 27 апреля 2018

Вы указали videoTable с неправильным типом, оно должно быть MatTable.

попробуйте с приведенным ниже примером кода: 

import { MatTable } from '@angular/material';

@ViewChild('videoTable') videoTable: MatTable<your type>;
// rest of the component

addVideo()
{
  // add to the datasource collection
  this.videoTable.renderRows();        // call from typescript
}

// template example
// call renderRows() directly from videoTable
<button mat-button [disabled]="partNumber == null || videoUrl == null" (click)="addVideo(); videoTable.renderRows()">

См. Рабочий демо .

...