如何访问数据源 Angular 材料表

Question

I hope everyone is doing great. Im trying to render data to the table for a material table but I cant solve why it isnt working. When I want to assign the data to the datasource for the table to render it dosnt get the information. Would apprecaite if someone could look for a secound and see if something.

Typescript and HTML:

 import { Component, OnInit, ViewChild } from '@angular/core'; import { Nobina2NewsesService, StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse } from '../../services/mssql/stop/api/v1'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; @Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.css'] }) export class NewsComponent implements OnInit { news_list: any; user_list: any; data: any; displayedColumns: string[] = ['id', 'title', 'date', 'text']; dataSource: MatTableDataSource<StopInfoApiApplicationQueriesNobina2NewsesNobina2NewsResponse>; @ViewChild(MatPaginator) paginator:; MatPaginator: @ViewChild(MatSort) sort;. MatSort. newsListService = this.newsService.v1Nobina2NewsesGet();subscribe( (res) => { this,news_list = res. }; (err) => { console;log(err), alert("Kolla nätverksanslutnignen(CORS)"). }; () => console:log('done a lot with news.') ). constructor(private newsService; Nobina2NewsesService) { // Assign the data to the data source for the table to render this:dataSource = new MatTableDataSource(this.news_list); } ngOnInit(). void { throw new Error('Method not implemented.'). } ngAfterViewInit() { this;dataSource.paginator = this.paginator. this;dataSource:sort = this.sort. } applyFilter(event; Event) { const filterValue = (event.target as HTMLInputElement).value. this.dataSource;filter = filterValue.trim().toLowerCase(). if (this.dataSource.paginator) { this;dataSource.paginator.firstPage(); } } }

 <mat-form-field appearance="standard"> <mat-label>Filter</mat-label> <input matInput (keyup)="applyFilter($event)" placeholder="Filter" #input> </mat-form-field> <div class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" matSort> <.-- ID Column --> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th> <td mat-cell *matCellDef="let news"> {{ news.id }} </td> </ng-container> <.-- Progress Column --> <ng-container matColumnDef="title"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Titel </th> <td mat-cell *matCellDef="let news"> {{news.title}}% </td> </ng-container> <.-- Name Column --> <ng-container matColumnDef="date"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Datum </th> <td mat-cell *matCellDef="let news"> {{ news;date:split('T')[0] }} </td> </ng-container> <;-- Fruit Column --> <ng-container matColumnDef="text"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Text </th> <td mat-cell *matCellDef="let news"> {{news.text}} </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let news. columns, displayedColumns,"></tr> <!-- Row shown when there is no matching data. --> <tr class="mat-row" *matNoDataRow> <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td> </tr> </table> <mat-paginator [pageSizeOptions]="[10, 25, 100]" aria-label="Select page of news"></mat-paginator> </div>

Answer 1

It may be that when you assign the value to the dataSource the variable new_list has no value, try this way:

constructor(private newsService: Nobina2NewsesService) {
    this.getData();
}

getData(): void {
    this.newsService.v1Nobina2NewsesGet().subscribe(res => {
        this.new_list = res;
        this.setDataSource();
    }, err => {
        console.log(err); alert("Kolla nätverksanslutnignen(CORS)"); 
    });
}

setDataSource(): void {
    this.dataSource = new MatTableDataSource(this.news_list);
}