关于ngrx-store-freeze与[(ngModel)]的问题

来源:4-15 脏值检测(1)

流叠

2019-11-15

父组件:

results$: Observable<Book[]>;
constructor(
    private store: Store<AppState>,
    ) {
    this.results$ = store.pipe(select(searchSelectors.searchResults));
  }

子组件

@input
set results(results: Book[]) {
	this._results = JSON.parse(JSON.stringfy(results)); //任意一种深拷贝的方法
}

get results() {
	return this._results;
}

_results: Book[];

子组件html,实际是一个可编辑的表格

<div>
	...
	[value]="results";
	...
	let-rowData let-rowIndex
	...
	<input type="text" [ngClass]="rowData.fieldColor" (focus)="onFocus(rowIndex)" (blur)="save(rowData,rowIndex)"  (keydown.enter)="save(rowData,rowIndex)" [(ngModel)]="rowData.name">
	...
</div>

app-store.module.ts:

StoreModule.forRoot(
      reducer,
      {
        metaReducers: !environment.production ? [storeFreeze] : []
      }
    ),

在这种情况下,似乎是ngModel不起作用了,无法得到通过input修改之后的值,理论上来说加了storeFreeze之后如果又修改的话会抛异常,但是我这里也没有抛异常,就是单纯的修改不了值,而且在@Input里我把从store拿到的值已经做了深拷贝,但还是这个问题。在这种情况下即使我把子组件html里的[value]绑定到一个本地变量,通过input标签修改的值仍然拿不到。
如果app-store.module.ts里的storeFreeze去掉之后就一切正常了,虽然正常来说storeFreeze不应该和[(ngModel)]一起使用,但是我已经把store里的值做了一次深拷贝,最关键的是不管[(ngModel)]绑定本地变量还是store里的值,就是拿不到修改之后的值。

老师帮帮我。ps: 我试过用响应式表单,但我用着会有问题,所以我现在只能用[(ngModel)]

写回答

2回答

接灰的电子产品

2019-11-15

你试一下 [ngModel]=",.." (ngModelChange)="handleChange()" 这样分开处理试一下

0
3
流叠
回复
接灰的电子产品
解决了,谢谢老师,控件自身的bug,与storefreeze用在一起会有问题
2019-11-15
共3条回复

接灰的电子产品

2019-11-15

新版本的ngrx 应该不需要使用freeze,你看看 ngrx.io

0
1
流叠
我们架构要求加的,而且我用的也不是最新版
2019-11-15
共1条回复

Angular 开发拼多多webapp 从基础到项目实战

高仿拼多多WebApp,带你在实战环境中学习Angular

1322 学习 · 451 问题

查看课程