javascript - ngrx/store 与 ngModel 引起了一些问题

Question

我正在使用 primeng 可编辑表和 ngrx/store。表值来自存储:结果。

父组件:

this.results$ = store.pipe(select(mySelectors.results));

使用异步将其传递给子组件[results]="results$|async"。

在子模板中:

<p-table [value]="results">
...
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
  <tr [pSelectableRow]="rowData">
  ...
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          <input pInputText type="text" [(ngModel)]="rowData.name">   // it's about this input
        </ng-template>
        <ng-template pTemplate="output">
          {{rowData.name}}
        </ng-template>
      </p-cellEditor>
    </td>
  </tr>
</ng-template>

结果模型是这样的:

{
 ...
 name: string;
 ...
}

我使用了ngrx-store-freeze。现在的问题是，商店的结果不能直接更改。因此，即使我尝试使用操作来更改商店中的值，但我无法使用 [(ngModel)]="rowData.name" 从输入标签获取更改后的值，因为它是只读的.

那么如何从输入标记中获取更改后的值，或者是否有更好的方法来做到这一点？我知道 ngModel 与 ngrx/store 有点冲突，我尝试深度复制结果，然后将其绑定(bind)到表，但它不起作用，深度复制仍然是只读的。

我被困在这里了。请帮助我

Answer 1

Ngrx 存储卡住会阻止您修改 rowData.names 的状态，因为您正在使用输入，这意味着您可以修改状态。

所以你可以通过删除 2 路绑定(bind)来修复它

<input pInputText type="text" [ngModel]="rowData.name">