NGRX 从存储的数组中删除元素

Question

我有一个对象保存在这样的商店中：

export interface Referential {
  id: string;
  values: Array<ReferentialData>;
}

export interface ReferentialData {
  libelle: string;
  value: string;
  borderColor: string;
  primaryColor: string;
  secondaryColor: string;
}

我使用 ReferentialData 填写表格，在更新时，我这样做：

        const values: Array<ReferentialData> = referentials.values.map<ReferentialData>((data, index) => {
          return {
            ...data,
            primaryColor: this.form.controls.referentials.value.referentials[index]?.primaryColor,
            secondaryColor: this.form.controls.referentials.value.referentials[index]?.secondaryColor,
            borderColor: this.form.controls.referentials.value.referentials[index]?.borderColor,
            libelle: this.form.controls.referentials.value.referentials[index]?.libelle,
            value: this.form.controls.referentials.value.referentials[index]?.value
          };
        });
        this.store.dispatch(
          SettingsActions.updateReferentials({
            referential: { ...referentials, values }
          })
        );

但现在我必须提供删除表格中一行的选项，所以我在表格中这样做：

this.referentialArray.removeAt(index);

它运行良好，但是在保存时，我在对象中保存了一个空行，当我重新加载时，我到处都是空行，我测试了几种解决方案，如：

this.referentials[0].values = { ...this.referentials[0].values.splice(index, 1) };

但是我总是出错，你有什么想法可以继续吗？

Answer 1

我用的是filter.

我不确定如何将其映射到您的代码中，但我的删除看起来像这样：

组件

  deleteProduct(product: Product): void {
    if (product && product.id) {
      if (confirm(`Really delete the product: ${product.productName}?`)) {
        this.store.dispatch(ProductActions.deleteProduct({ productId: product.id }));
      }
    } else {
      // No need to delete, it was never saved
      this.store.dispatch(ProductActions.clearCurrentProduct());
    }
  }

效果

  deleteProduct$ = createEffect(() => {
    return this.actions$
      .pipe(
        ofType(ProductActions.deleteProduct),
        mergeMap(action =>
          this.productService.deleteProduct(action.productId).pipe(
            map(() => ProductActions.deleteProductSuccess({ productId: action.productId })),
            catchError(error => of(ProductActions.deleteProductFailure({ error })))
          )
        )
      );
  });

减速器

  on(ProductActions.deleteProductSuccess, (state, action): ProductState => {
        return {
          ...state,
          products: state.products.filter(product => product.id !== action.productId),
          currentProductId: null,
          error: ''
        };
      }),

我这里有一个完整的例子：https://github.com/DeborahK/Angular-NgRx-GettingStarted/tree/master/APM-Demo4

NGRX 从存储的数组中删除元素

NGRX remove element from stored array

ngrx

angular