I need to ensure that the data source in loans.component.ts is updated whenever a new loan is submitted from loan-form.component.ts.
Therefore, in loan-form.component.ts, I have the following function being called when the form is submitted:
onSubmit() {
var config = {
headers : {
'Content-Type': 'application/json;charset=utf-8;'
}
}
this.http
.post(this.getHostUrl(), JSON.stringify(this.model), config).subscribe();
this.loanAdded.emit(true);
}
Defined as
@Output() loanAdded : EventEmitter<boolean> = new EventEmitter<boolean>();
Then, in loans-component.ts, I have
@Input()
set refreshData (value: boolean) {
this.refresh();
}
Where
refresh() {
console.log('refresh');
this.getLoans().subscribe((loans) => {
this.loans = loans;
this.dataSource = new MatTableDataSource(loans);
this.dataSource.sort = this.sort;
this.changeDetectorRefs.detectChanges();
});
}
Although it works on and off, it seems to be inconsistent.
- In Firefox and Edge, it successfully updates on the second submit and then sporadically after that.
- In Chrome, it consistently updates.
I have also attempted to add the following:
ngOnChanges(changes: SimpleChanges): void {
this.refresh();
}
ngOnInit() {
this.refresh();
}
ngAfterViewInit() {
this.refresh();
}
I notice in the console that refresh is executed three times each time the form is submitted, but the grid does not always reflect the update...
Additionally, I have a method to delete rows and update, which functions perfectly:
removeSelectedRows() {
this.selection.selected.forEach(item => {
// console.log(item);
this.http.delete(this.getHostUrl() + '/' + item.Id).subscribe();
});
this.ngOnChanges(null);
this.refresh();
this.selection = new SelectionModel<Loan>(true, []);
}
Could anyone offer guidance or insight into resolving this issue?