PrimeNG表格行内AutoComplete报编译器错误：模板变量为只读

错误原因 #

模板变量customerRow属于Angular模板上下文的只读变量，双向绑定[(ngModel)]会在选中选项时尝试给它赋值，直接触发"模板变量只读"的报错。

解决方案 #

不要直接绑定模板变量customerRow，而是通过行索引操作数据源dataSrc里的对应对象：

1. 调整AutoComplete的绑定逻辑：

   • 用单向绑定[ngModel]关联dataSrc[i]，保证初始值正常显示
   • 借助(onSelect)事件替代双向绑定的赋值逻辑，选中选项时更新数据源

2. 修改后的HTML代码：

<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]="dataSrc[i]" [forceSelection]="true" [dropdown]="true"
                            [suggestions]="autoCompleteSuggestions"
                            (completeMethod)="onAutoComplete($event)"
                            (onSelect)="updateCustomer(i, $event)">
             </p-autoComplete>
         </td>
      </tr>
   </ng-template>
</p-table>

3. 在组件类中添加更新方法：

updateCustomer(index: number, selectedCustomer: any) {
  this.dataSrc[index] = selectedCustomer;
  // 若视图未自动更新，可通过创建新数组强制触发变更检测
  // this.dataSrc = [...this.dataSrc];
}

关键说明 #

直接操作数据源dataSrc而非模板变量，既规避了只读变量的赋值错误，又能确保数据源实时同步更新；如果遇到视图未刷新的情况，可通过重新赋值数组的方式强制触发Angular的变更检测。

内容的提问来源于stack exchange，提问作者user1630508