Currently facing a challenge with the Angular Material table implementation. Struggling to comprehend everything... I am looking to link my AngularApp with a robot that sends me information in a "datas" array. To display my array, I utilized the following code:
<table id="sensorsTable" class="table table-striped">
<tr *ngFor="let data of datas">
<td>{{data.name}}</td>
<td>{{data.value}}</td>
</tr>
</table>
The above code was functioning well but now I aim to incorporate an Angular Material table.
Below is my TypeScript code and unfortunately my view does not update when the "datas" array changes...
If anyone can offer assistance, that would be greatly appreciated!
Here is the current TypeScript code:
import { Component } from '@angular/core';
declare var Robot: any;
import { HostListener } from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
export interface Data {
name: string;
value: number
}
var datas: Data[] = [
{name: 'Hydrogen', value: 1.0079},
{name: 'Helium', value: 4.0026},
{name: 'Lithium', value: 6.941},
{name: 'Beryllium', value: 9.0122},
{name: 'Boron', value: 10.811},
{name: 'Carbon', value: 12.0107},
];
export class MyDataSource extends DataSource<any> {
connect(): Observable<Data[]> {
return Observable.of(datas);
}
disconnect() {}
}
@Component({
selector: 'roomba-app',
templateUrl: "./app.component.html",
styles: ["./app.component.scss"]
})
export class AppComponent {
datas: Array<Object> = [];
robot:any;
powerMotorRight: number;
powerMotorLeft: number;
maxSpeed = 200;
displayedColumns = ['name', 'value'];
dataSource = new MyDataSource();
@HostListener('document:keypress', ['$event'])
handleKeyPressed(event: KeyboardEvent) {
let keyPressed = event.key;
if(keyPressed == "z"){
this.powerMotorRight = this.maxSpeed;
this.powerMotorLeft = this.maxSpeed;
}
// Similar if statements for other key presses
constructor(){
let testData = {
name: "test",
value: "255"
};
this.datas.push(testData);
this.robot = new Robot();
this.robot.on("connected", function(){
console.log("connected");
this.robot.safeMode();
this.robot.streamAllSensors();
}.bind(this));
this.robot.on("datas", function(receivedDatas:any){
this.datas = receivedDatas;
datas = this.datas;
}.bind(this));
}
}