是否有可能与来自NGXS状态的对象进行数据绑定？

问题描述

我最近将NGXS引入了我的项目。在大多数情况下，我对软件包都很满意。但是我面临一个相当烦人的问题。我有一个深层物体，其中许多属性都已绑定和更改：

export class AnalysisComponent implements OnInit {
  @Select(DeepObjectState) stateObservable$: Observable<DeepObjectStateModel>;
  public deepObject: DeepObjectviewmodel;

  ngOnInit(): void {
    this.stateSubscription = this.stateObservable$.subscribe(state => {
      this.deepObject = state.deepObject;
    });
  }

以下是数据绑定属性的示例：

<mat-form-field>
  <mat-label>Some property</mat-label>
  <input matInput [value]="deepObject.someProperty" (input)="deepObject.someProperty= $event.target.value">
</mat-form-field>

但是，当我尝试实际更改属性时，出现以下错误： ERROR TypeError: Cannot assign to read only property 'someProperty' of object '[object Object]'

我了解到，状态是不可变的，在开发模式下NGXS会冻结状态的属性，因此会出错。通常，要更改状态，应该调度一个动作来完成任务。但是，对我的对象执行此操作将导致大量多余代码。

我想要的是从状态中检索对象，按照以前的方式对其进行更改，并在完成后向存储库分发操作以更新整个对象。我已经尝试过使用Object.assign({},this.deepObject对克隆进行深度冻结，但是结果是相同的。

必须有一种简单的方法来做到这一点，但是怎么办？

解决方法

我也遇到了同样的问题，但不知何故得到了解决。我正在共享我的服务功能以从 node.js 获取数据。如果这对您有帮助，请随时关注。

控制器中的API函数来获取所有产品。 nodejs

exports.getAllProducts = (req,res,next) => {
Product.find()
.populate('category')
.populate('attributes')
.populate('creator')
.exec((error,products) => {
    if(error) return res.status(400).json({ error });
    if(products) {
        res.status(200).json({
            //message: 'products fetch Successfully',products
        });
    }
});   }

假设您知道如何在 node.js 中设置路由器。如果你不方便问。

我的产品 service.ts 获取所有产品

getAllProduct() {  return this.http.get<Product[]>(this.adminProductUrl,{
observe: 'body',withCredentials: true,headers: new HttpHeaders().append('Content-Type','application/json')})  .pipe(map((data) => {
const productArray: Array<Product> = [];
for(const id in data) {           
  if(data.hasOwnProperty(id)) {
    productArray.push(data[id]);
  }
}
console.log(productArray)          
return productArray;  })) }

在订阅和循环数据之前使用 .pipe 和 map，您可以在上面的代码中看到.. 遵循并亲自尝试。

我不确定这种方法是否是与 ngxs 状态管理系统一起使用的正确方法，但我解决了这个问题。

我想为我的解决方案得到一个肯定的答案，无论它是否是正确的方法，如果不是，那么我错过了什么。请回答。谢谢。希望对兄弟有帮助:)

angular angular ngxs redux redux redux redux