<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.
On Fri, Jul 17, 2020 at 5:55 AM Manjari Singh <manjari.si...@gmail.com>
wrote:
> you need to paste code snippet or link to code repository
>
> On Thu, Jul 16, 2020 at 11:25 PM rx4 <rohit...@gmail.com> wrote:
>
>>
>>
>> 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
>>
>> --
>> 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+unsubscr...@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
>> <https://groups.google.com/d/msgid/angular/CA%2BX7-J0Hzg6GCs2HiD%2B5Q%3D7k-h-c%3Dh7PJYVrVi2R91Z0kudsMQ%40mail.gmail.com?utm_medium=email&utm_source=footer>
>> .
>>
> --
> 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+unsubscr...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/angular/CAMF%2BC3ojNGYGOWG6FmkfAXoDxcXOp5%2Byowsq2vSym7bDRNHomQ%40mail.gmail.com
> <https://groups.google.com/d/msgid/angular/CAMF%2BC3ojNGYGOWG6FmkfAXoDxcXOp5%2Byowsq2vSym7bDRNHomQ%40mail.gmail.com?utm_medium=email&utm_source=footer>
> .
>
--
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/CA%2BX7-J1Ywgxsc3UaaPZWa-AOhVvmA_jB5Or1%3DkQJmRpuiOc%2BUQ%40mail.gmail.com.
