Angular4绑定api数据查看不起作用?

时间:2021-06-18 19:41:35

New to Angular2 and up ,I have data from backend that i am trying to bind it to view , it throws error dataSource does not exist , what is correct way to assign variable data to view in angular4 ?

Angular2及以上的新手,我有来自后端的数据,我试图将它绑定到视图,它抛出错误dataSource不存在,在angular4中分配变量数据的正确方法是什么?

stream.component.ts

stream.component.ts

@Component({
    selector: 'app-stream',
    templateUrl: './stream.component.html',
    styleUrls: ['./stream.component.css']
})
export class StreamComponent {
    title = 'From Stream Component';
    displayedColumns = ['ticketNum', "assetID", "severity", "riskIndex", "riskValue", "ticketOpened", "lastModifiedDate", "eventType"];
    data: any = [];
    dataSource: any = {};
    stream: any[];
    constructor(private streamService: StreamService) {
        this.getData();

    };

    getData() {
        this.streamService.getAllStream().subscribe(data => {
            this.data = data;
            dataSource = new MatTableDataSource(data);
            console.log("Stream", data);
            //let gridOptions = { data: 'stream' };
        });
    }

}
export interface Element {
    ticketNum: number;
    ticketOpened: number;
    eventType: string;
    riskIndex: string;
    riskValue: number;
    severity: string;
    lastModifiedDate: number;
    assetID: string;
}

stream.component.html

stream.component.html

<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>
</mat-table>

Error

错误

ERROR in src/app/stream/stream.component.ts(30,13): error TS2304: Cannot find name 'dataSource'.

src / app / stream / stream.component.ts(30,13)中的错误:错误TS2304:找不到名称'dataSource'。

1 个解决方案

#1


0  

change dataSource = new MatTableDataSource(data); to this.dataSource = new MatTableDataSource(data);

change dataSource = new MatTableDataSource(data); to this.dataSource = new MatTableDataSource(data);

#1


0  

change dataSource = new MatTableDataSource(data); to this.dataSource = new MatTableDataSource(data);

change dataSource = new MatTableDataSource(data); to this.dataSource = new MatTableDataSource(data);