ngrx/store with ngModel caused some problems

Question

I'm using primeng editable table and ngrx/store. The table value is from store: results.

The parent component:

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

use async to pass it to child componnet [results]="results$|async".

In the child template:

<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>

the results model is like this:

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

I used ngrx-store-freeze. now the question is,the results from store cannot be changed directly. So even if I tried to use action to change values in the store, but I cannot get the changed value from the input tag with [(ngModel)]="rowData.name", cause it's read only.

So how can I get the changed value from input tag, or is there a better way to do this? I understand that ngModel is sort of conflict with ngrx/store, and I tried to deep copy results then bind it to the table, but it's not working, the deep copy is still read only.

I'm stuck here. please help me

Answer 1

problem solved. There may be some bugs using ngrx-store-freeze with primeng editable table. when out of p-table, all will be ok.