我有一个材料数据表,我试图动态设置数据源,但它抛出dataSource
未定义的错误,我是 angular2 的新手,请帮助我理解下面的代码是否有问题。
流.component.html
<mat-table #table [dataSource]="dataSource">
<mat-table #table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="ticketNum">
<mat-header-cell *matHeaderCellDef> Ticket Number </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.ticketNum}} </mat-cell>
</ng-container>
流.component.ts
import {
Component,
OnInit
} from '@angular/core';
import {
StreamService
} from '../stream.service';
import {
MatTableDataSource
} from '@angular/material';
import * as io from 'socket.io-client';
@Component({
selector: 'app-stream',
templateUrl: './stream.component.html',
styleUrls: ['./stream.component.css']
})
export class StreamComponent implements OnInit {
displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
dataSource: MatTableDataSource < Element[] > ;
socket = io();
constructor(private streamService: StreamService) {};
ngOnInit() {
this.streamService.getAllStream().subscribe(stream => {
this.dataSource = new MatTableDataSource(stream);
});
this.socket.on('newMessage', function(event) {
console.log('Datasource', event);
this.dataSource.MatTableDataSource.filteredData.push(event);
});
}
}
export interface Element {
ticketNum: number;
ticketOpened: number;
eventType: string;
riskIndex: string;
riskValue: number;
severity: string;
lastModifiedDate: number;
assetID: string;
}
我认为该this.socket.on('newMessage'
事件在this.streamService.getAllStream()
解析之前被触发,所以必须等到数据源被实例化:
this.streamService.getAllStream().subscribe(stream => {
this.dataSource = new MatTableDataSource(stream);
this.socket.on('newMessage', (event) => { // <-- here
console.log('Datasource', event);
this.dataSource.data.push(event);
this.dataSource.data = [...this.dataSource.data]
});
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句