试图在ng-template中使用ngModel

Question

我试图使用ng-template和ng-container，以及primeng在我的表中有动态单元格:

<tr *ngFor="let data of tableData">
<ng-container
[ngTemplateOutletContext]="{ $implicit: data.n0 }"
[ngTemplateOutlet]="isEditable ? editableCell : readOnlyCell"
></ng-container>
</tr>
<ng-template let-data #editableCell>
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input
class="edit-field-input"
type="number"
[(ngModel)]="data"
/>
</ng-template>
</p-cellEditor>
</td>
</ng-template>
<ng-template let-data #readOnlyCell>
<td>
<p-cellEditor>
<ng-template pTemplate="output">
{{ data }}
</ng-template>
</p-cellEditor>
</td>
</ng-template>

但我得到错误:Error Cannot assign value $event to template variable data. Template variables are read-only.
我相信这与我的ngModel有关，但我真的不知道如何解决这个问题。

Answer 1

问题出在我将数据传递给模板的方式上。

<tr *ngFor="let data of tableData">
<ng-container
[ngTemplateOutletContext]="{ row: data, name: 'n0' }"
[ngTemplateOutlet]="isEditable ? editableCell : readOnlyCell"
></ng-container>
</tr>

<ng-template let-row="row" let-name="name" #readOnlyCell>
<td class="degrees-cell">
{{ row[name] }}
</td>
</ng-template>

<ng-template let-row="row" let-name="name" #editableCell>
<td pEditableColumn class="degrees-cell">
<p-cellEditor>
<ng-template pTemplate="input">
<input
class="edit-field-input"
type="number"
[(ngModel)]="row[name]"
/>
</ng-template>
<ng-template pTemplate="output">
{{ row[name] }}
</ng-template>
</p-cellEditor>
</ng-template>