Angular - Refreshing mat-table from array change

Question

I have an app call watcher, composed of a component / service. I have a simple table which shows empty properly

    <table mat-table [dataSource]="this.getWatcherTable()" class="mat-elevation-z8">
  
        ... my columns and rows are described here

    </table>

The source is linked to my component file

export class WatcherComponent{

    constructor(public watcherService : WatcherService ) {}

    getWatcherTable(){
        return this.watcherService.watcherTable;
    }
}

Itself linked to the service file

export class WatcherService {
    watcherTable : Array<Watcher> = new Array();

    updateWatchers(name,value){
        this.watcherTable.push({name:name, value:value});
    }
}

The update is trigger by another app and works well, a console log of the array have the update, but the array is still displayed empty

Dariusz Ostolski · Accepted Answer · 2021-05-12 20:23:56Z

1

Every time you update an array you should create new one so Angular change detection will update automatically component. So instead:

export class WatcherService {
    watcherTable : Array<Watcher> = new Array();

    updateWatchers(name,value){
        this.watcherTable.push({name:name, value:value});
    }
}

You should have:

export class WatcherService {
    watcherTable : Array<Watcher> = new Array();

    updateWatchers(name,value){
        this.watcherTable = this.watcherTable.concat([{name:name, value:value}]);
    }
}

answered May 12, 2021 at 20:23

Dariusz Ostolski

4723 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Refreshing mat-table from array change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related