代码之家  ›  专栏  ›  技术社区  ›  user1630508

PrimeNG表行中的PrimeNG AutoComplete引发编译器错误“模板变量为只读。”

  •  0
  • user1630508  · 技术社区  · 1 年前

    编译器产生错误:

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

    我可以切换到 [ngModel]="customerRow" (ngModel)="customerRow" 但是模型 dataSrc 进行选择时不会更新。

    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)]="customerRow" [forceSelection]="true" [dropdown]="true"
                                [suggestions]="autoCompleteSuggestions"
                                (completeMethod)="onAutoComplete($event)">
                 </p-autoComplete>
             </td>
          </tr>
       </ng-template>
    </p-table>
    
    1 回复  |  直到 1 年前
        1
  •  1
  •   Sam    1 年前

    此上下文中的行是通过ngTemplateOutlet向模板传递数据的表,并且您被告知它是只读的。您应该将数据绑定拆分回[ngModel]&(ngModelChange),当ngModelChange事件触发时,您应该使用它来更新该行的数据源表示。dataSource将被反馈到您的表中,行值将相应地更新。

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