How to access data souce Angular Material Table

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

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);
}

Advertisement

Answer