Angular: DataSource updates; Table doesn't

Question

I have a Material table tied to a custom datasource. When editing and saving a row, everything works except when the datasource updates (the console.log shows the datasource has new values) the table doesn't. Why doesn't the table refresh when the datasource is updated?

Component

ingredientDatabase: IngredientService | null;
dataSource: IngredientsDataSource | null;

  public loadData(id: string) {
    this.ingredientDatabase = new IngredientService(this.http);
    this.dataSource = new IngredientsDataSource(this.ingredientDatabase, id);
  }

openEditIngredientDialog(name: string, surcharge: number): void {
   ...

  dialogRef.afterClosed().subscribe(result => {
      if (result === 1) {
      let itemIndex = this.ingredientDatabase.dataChange.value.findIndex(x => x.name === name);
      this.ingredientDatabase.dataChange.value[itemIndex] = this.ingredientService.getDialogData();
  }
});
  }

Datasource

export class IngredientsDataSource extends DataSource<ItemIngredient> {

  constructor(
    public ingredientService: IngredientService,
    public menuItemId: string) {
      super();
    }

    connect(): Observable<ItemIngredient[]> {
      const displayDataChanges = this.ingredientService.dataChange
      this.ingredientService.getItemIngredients(this.menuItemId);
      return displayDataChanges.asObservable();   }

  disconnect(): void {

  } }

Service

    export class IngredientService {
      constructor(
        private http: HttpClient ) { }

      dataChange: BehaviorSubject<ItemIngredient[]> = new BehaviorSubject<ItemIngredient[]>([]);

      dialogData: any;

      get data(): ItemIngredient[] {
          return this.dataChange.value;
        }

      getDialogData() {
          return this.dialogData;
        }

        getItemIngredients(id: string): void {
           this.http.get<ItemIngredient[]>(`${this.URL}/${id}`).subscribe(data => {
            this.dataChange.next(data);
          },
          (error: HttpErrorResponse) => {
          console.log (error.name + ' ' + error.message);
          });
        }

        updateIngredient(itemIngredient: ItemIngredient): void {
          this.dialogData = {name: itemIngredient.name, surcharge: Number(itemIngredient.surcharge)};
        }

Answering your question is fine, but then post the answer as an answer, not in the question. — JB Nizet

markelc markelc · Accepted Answer · 2018-07-02T11:37:51

UPDATE WITH SOLUTION

I guess you have to force the datasource to recognize that a change has been made. So I added a change property to the Datasource:

export class IngredientsDataSource extends DataSource<ItemIngredient> {
  _change = new BehaviorSubject<ItemIngredient[]>([]);

  get change(): ItemIngredient[]{
    return this._change.value;
  }

  set change(change: ItemIngredient[]){
    this._change.next(change);
  }

  constructor(
    public ingredientService: IngredientService,
    public menuItemId: string) {
      super();
    }

    connect(): Observable<ItemIngredient[]> {
      const displayDataChanges = [
        this.ingredientService.dataChange,
        this._change
      ];

      this.ingredientService.getItemIngredients(this.menuItemId);
      return merge<ItemIngredient[]>(...displayDataChanges);
  }

  disconnect(): void {

  }
}

And then at then end of the dialogafterClose, loop through service's data:

  private refreshTable() {
    this.ingredientDatabase.dataChange.forEach(item =>
      this.dataSource.change = item
    );

There may be other solutions but this worked for me.

Angular: DataSource updates; Table doesn't

1 Answers