Angular：数据源更新；表没有答案

【问题标题】：Angular: DataSource updates; Table doesn'tAngular：数据源更新；表没有
【发布时间】：2018-06-30 19:07:49
【问题描述】：

我有一个绑定到自定义数据源的材料表。编辑和保存一行时，除了数据源更新（console.log 显示数据源有新值）表没有更新外，一切正常。为什么更新数据源时表格不刷新？

组件

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();
  }
});
  }

数据源

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 {

  } }

服务

    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)};
        }

【问题讨论】：

回答您的问题很好，但随后将答案作为答案发布，而不是在问题中。

标签： angular angular-material

【解决方案1】：

更新解决方案

我想您必须强制数据源识别已进行更改。所以我向数据源添加了一个更改属性：

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 {

  }
}

然后在对话结束后关闭，循环访问服务的数据：

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

可能还有其他解决方案，但这对我有用。

【讨论】：