Refreshing the data displayed in an Angular 9 Material Table generated through a CLI command

Question

Refreshing the data displayed in an Angular 9 Material Table generated through a CLI command

My application allows users to upload files, perform backend operations, and receive a list of JSON Objects in return. I have created a material table to display this data. However, I am facing an issue where the dataSource of my material table is not updating correctly. When I upload a file and view the data, it displays correctly. But when I upload a different file and view the content again, it still shows the data from the first file uploaded initially. I understand that the problem lies in not subscribing the dataSource to the changes sent by the server, even though I have tried adding the subscription without success. Can someone please assist me with resolving this issue?

test-table-datasource.ts

// Code for TestTableDataSource goes here...

test-table.component.ts

// Code for TestTableComponent goes here...

test-table.component.html

<div class="mat-elevation-z8">
  <table mat-table class="full-width-table" matSort aria-label="Elements">
    // Table columns code goes here...
  </table>

  <mat-paginator #paginator
      [length]="dataSource?.data.length"
      [pageIndex]="0"
      [pageSize]="2"
      [pageSizeOptions]="[2, 3, 5, 25, 50, 100, 250]">
  </mat-paginator>
</div>

I have looked at some solutions online but they don't apply directly to my situation since I used CLI to generate the table. As a beginner in Angular, any help would be greatly appreciated. Thank you!

javascript angular typescript pagination angular-material

Answer 1

Answer №1

The parameter known as dataSource allows for direct specification of the data source to be utilized within the table.

<mat-table [dataSource]="dataSource">

Rather than explicitly stating this.table.dataSource, consider binding it directly to dataSource.

Answer 2

The parameter known as dataSource allows for direct specification of the data source to be utilized within the table.

<mat-table [dataSource]="dataSource">

Rather than explicitly stating this.table.dataSource, consider binding it directly to dataSource.

Answer 3

Answer №2

Give this a try within your test-table-datasource.ts

  // Include the following lines
  dataChange = new EventEmitter();
  updateData(data = []) {
    this.data = data.length ? data : this.data;
    this.dataChange.emit();
  }
  // .
  // .
  // Append an observable to the existing list
    const dataMutations = [
      observableOf(this.data),
      this.dataChange, // <- crucial here!
      this.paginator.page,
      this.sort.sortChange,
    ];

In your test-table.component.ts, simply modify one line as follows:

  ngOnInit() {
    this.dataSource = new TestTableDataSource();
    this.sharedData.watchServerResponse.subscribe(res =>{
      this.dataSource.updateData(res); // <- focus on this
      if(this.viewOpened === true){
        this.table.dataSource = this.dataSource;
      }
    })
  }

Remember to handle imports properly, good luck!

Answer 4

Give this a try within your test-table-datasource.ts

  // Include the following lines
  dataChange = new EventEmitter();
  updateData(data = []) {
    this.data = data.length ? data : this.data;
    this.dataChange.emit();
  }
  // .
  // .
  // Append an observable to the existing list
    const dataMutations = [
      observableOf(this.data),
      this.dataChange, // <- crucial here!
      this.paginator.page,
      this.sort.sortChange,
    ];

In your test-table.component.ts, simply modify one line as follows:

  ngOnInit() {
    this.dataSource = new TestTableDataSource();
    this.sharedData.watchServerResponse.subscribe(res =>{
      this.dataSource.updateData(res); // <- focus on this
      if(this.viewOpened === true){
        this.table.dataSource = this.dataSource;
      }
    })
  }

Remember to handle imports properly, good luck!

Refreshing the data displayed in an Angular 9 Material Table generated through a CLI command

Answer №1

Answer №2

Similar questions

Webpack encountered an error: SyntaxError due to an unexpected token {

Utilizing correct Django CSRF validation when making a fetch post request

An issue occurred in the ngx-bootstrap module at line 8 of the type-checks.d.ts file, displaying the error message: "Cannot find name 'Extract'"

What is the best approach in Typescript to ensure type understanding when importing using require()?

Using jQuery to refresh a div element

Creating complex concave shapes using Three.js from a point cloud

Enhancing data binding in Angular 2.0 with string interpolation

Encountering a problem when attempting to utilize AngularFire's Cloud Messaging Angular module due to missing configuration values for the app

When the draggable item is released near the drop zone, allow drag and drop to combine

Exiting a void method in JavaScript/Typescript using the return or break statement

What is the best way to include thousand separators in a numeric array with the data retrieved from a server?

Utilizing Angular partials within specific views with the assistance of ui-router

Is there a way to find an object that includes a specific string in its key without relying on a loop?

Images within <md-card>s that are generated by ng-repeat are not being displayed

Deciphering the data sent in the req.body of a POST request

Navigate to a specific section within a table

What is the method for retrieving data from a node in Firebase Realtime Database using TypeScript cloud functions, without relying on the onCreate trigger?

Guide on incorporating vanilla JavaScript into a personalized Vue component

Retrieving the ngModel value in Ionic without triggering any actions

What is the best way to flip cards with the onClick event in JavaScript?