Question

我们正在使用Angular 6和NgRX（Redux-Pattern）开发一个应用程序。我的模板 discovery.component.html 中有一个复选框：

<label>
  <input type="checkbox" name="wrongSpelling"
    [ngModel]="state.wrongSpelling" (click)="toggleWrongSpelling($event)" />
  Wrong Spelling
</label>

根据Redux模式，数据流应如下所示：

用户单击复选框。复选框未未切换，但调度了更新操作。此外，state 未更新（单向绑定）
render()以新状态和更新后的实体被调用。已更新的实体已分配给组件。
复选框的状态应根据更新的实体而更新。

discovery.component.ts 的相关代码如下：

public state;

render(state) {
  if (state.discovery) {
    this.state = state.discovery;
  }
}    

toggleWrongSpelling(event) {
  event.preventDefault();
  this.discoveryAction.update({
    wrongSpelling: !this.state.wrongSpelling // it's safe that state exists here
  });
}

但是，在点击时未选中该复选框。

我尝试过的事情（没有成功）：

调试render()：每次单击复选框时，确实会切换this.state.wrongSpelling
在我的DiscoveryComponent wrongSpelling中创建一个成员，该成员在toggleWrongSpelling()中切换并读入模板（而不是状态）（我想到了changeDetection策略，这可能是这里的问题）
在模板中使用[value]，[checked]和[(ngModel)]（用于测试）而不是[ngModel]
将Wrong Spelling替换为{{ state.wrongSpelling }}，以查看是否存在计时问题
使用了安全导航操作员：[ngModel]="state?.wrongSpelling"

所以问题似乎出在模板中。 这可能是什么问题？

Answer 1

如何使用“ noop”选项？请尝试在组件中添加以下代码。

import { MAT_CHECKBOX_CLICK_ACTION } from '@angular/material';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.css'],
  providers: [
    { provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop' }
  ],
})

'noop'选项可防止更改复选框的值。

noop
Do not change the checked value or indeterminate value. 
Developers have the power to implement customized click actions.

https://material.angular.io/components/checkbox/overview

单向绑定[ngModel]的复选框在Angular 6中不起作用

1 个答案: