Mat table DataSource is not updating properly

[rx4]

Hi,

I have used MatTable in my web application, in constructor i have 2 records which i assigned to mat table datasource and its showing me 3 rows in table. At same time i am requesting websocketapi to get another row data which returns me json. then those data i assign to table mat data source. but it's not displayed in table ui.

Same code works in constructor, but same code i used in messageProc method which is not updating UI.

Please help me to understand. what is the mistake.

Thanks,
Rohit Kshirsagar

[Manjari Singh]

you need to paste code snippet or link to code repository

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CA%2BX7-J0Hzg6GCs2HiD%2B5Q%3D7k-h-c%3Dh7PJYVrVi2R91Z0kudsMQ%40mail.gmail.com.

[rx4]

 <div class="mat-elevation-z8">

              <table mat-table [dataSource]="dataSource" class="list" matSort>

                <!-- ID Column -->
                <ng-container matColumnDef="trainSymbol">
                  <th mat-header-cell *matHeaderCellDef> Train Symbol </th>
                  <td mat-cell *matCellDef="let element"> {{element.trainSymbol}} </td>
                </ng-container>

                <!-- Name Column -->
                <ng-container matColumnDef="trainLength">
                  <th mat-header-cell *matHeaderCellDef mat-sort-header> Train Length </th>
                  <td mat-cell *matCellDef="let element"> {{element.trainLength}} </td>
                </ng-container>


              

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; 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]="[5, 10, 25, 100]"></mat-paginator>
            </div>

this is my template and below is ts file code

import {Component, OnInit, ViewChild, Input} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { WebSocketAPI } from './WebSocketAPI';


export interface TrainDetails {
  trainSymbol: String;
  trainLength: String;
  // dest: any;
}


@Component({
  selector: "app-icons",
  templateUrl: "icons.component.html",
  styleUrls: ['./icons.component.css']
})
export class IconsComponent implements OnInit {
  displayedColumns: string[] = ['trainSymbol','trainLength'];
  dataSource: MatTableDataSource<TrainDetails>;

  trainDetail: any;
  connectionStatus: boolean=false;
  platformDetails: any;
  arr:any;


webSocketAPI: WebSocketAPI;
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  @Input() childMessage: any;
  constructor() {
    //       // Create 100 users
    var users = Array.from({length: 3}, (_, k) => createNewUser(k + 1, ""));
    console.log("initial date",users);
    // // Assign the data to the data source for the table to render
     this.dataSource = new MatTableDataSource(users);
        //JSON.parse(this.trainDetail);
  }

  ngOnInit() {
    this.webSocketAPI = new WebSocketAPI(new IconsComponent());
    this.connect();
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

 

  connect(){
    this.webSocketAPI.connect();
  }

  disconnect(){
    this.webSocketAPI.disconnect();
  }

  sendMessage(){
    this.webSocketAPI._send("name");
  }

handleMessage(message){
  //this.greeting = message;
  //message = JSON.stringify(message)
  if(message.includes("status")){
    this.connectionStatus = true;
    console.log("Message Recieved app connectionStatus :: " + this.connectionStatus);
  }
  if(!message.includes("trainSymbol") && !message.includes("alive")){
            this.platformDetails = message;
            console.log("Message Recieved app platformDetails :: " + this.platformDetails);
  }
  if(message.includes("trainSymbol")){
      //this.trainDetail = message;
      //console.log("Message Recieved app trainDetail :: " + this.trainDetail);
      var obj = JSON.parse(message);
      this.trainDetail = obj.content;
      console.log("Message Recieved app trainDetail value :: " + this.trainDetail[0].trainSymbol);

  //       // Create 100 users
   var users = Array.from({length: 20}, (_, k) => createNewUser(k + 1, this.trainDetail[k]));
  // // Assign the data to the data source for the table to render
   //this.dataSource = (new MatTableDataSource(users));
    console.log("new date",users);
    // // Assign the data to the data source for the table to render
   
     this.dataSource = new MatTableDataSource(users);

   //this.dataSource.connect().next(data);

   console.log("New data===="+ this.dataSource.data);


      //JSON.parse(this.trainDetail);
  }
 

}

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

function createNewUser(id: number, trainDetail:any): TrainDetails {
 
  return {
    trainSymbol: "trainDetailtrainSymbol",
    trainLength: "trainDetail.trainSymbol"
    // dest:  trainDetail.trainSymbol
  };

}

I have given hardcoded value in return type but my problem is this.datasource is not working when i receive data in  handleMessage().

Please help me, Thanks in advance.

To view this discussion on the web visit https://groups.google.com/d/msgid/angular/CAMF%2BC3ojNGYGOWG6FmkfAXoDxcXOp5%2Byowsq2vSym7bDRNHomQ%40mail.gmail.com.