PrimeNG AutoComplete in PrimeNG Table row throws compiler error "Template variables are read-only."

Question

Compiler produces the error:

Error: Cannot assign value "$event" to template variable "customerRow". Template variables are read-only.

I can switch to [ngModel]="customerRow" (ngModel)="customerRow" but then the model dataSrc doesn't update when a selection is made.

HTML snippet:

<p-table [value]="dataSrc">
   <ng-template pTemplate="body" let-customerRow let-i="rowIndex">
      <tr>
         <td>
            <p-autoComplete name="myAutoComplete" field="displayName" dataKey="id"
                            placeholder="Search..."                                       
                            [(ngModel)]="customerRow" [forceSelection]="true" [dropdown]="true"
                            [suggestions]="autoCompleteSuggestions"
                            (completeMethod)="onAutoComplete($event)">
             </p-autoComplete>
         </td>
      </tr>
   </ng-template>
</p-table>

Answer 1

Row in this context is the table passing data to your template via ngTemplateOutlet, and you are being told it is read only. You should split the data bindings back out to [ngModel] & (ngModelChange), and when the ngModelChange event fires you should use this to update your datasource's representation of that row. dataSource will then be fed back into your table and the row value's will be updated accordingly.

<p-table [value]="dataSrc">
   <ng-template pTemplate="body" let-row let-i="rowIndex">
      <tr>
         <td>
            <p-autoComplete name="myAutoComplete" field="displayName" dataKey="id"
                            placeholder="Search..."                                       
                            [ngModel]="row"
                            (ngModelChange)="updateDataSource($event)"
      [forceSelection]="true" [dropdown]="true"
                            [suggestions]="autoCompleteSuggestions"
                            (completeMethod)="onAutoComplete($event)">
             </p-autoComplete>
         </td>
      </tr>
   </ng-template>
</p-table>

updateDataSource(value: any) {
    // update datasource here to modify the row you want to change.
}