尝试在 ng-template 中使用 ngModel

Question

I am trying to use ng-template and ng-container , alongside primeng to have dynamic cells in my table:

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

But I get the error: Error Cannot assign value $event to template variable data. Template variables are read-only. Error Cannot assign value $event to template variable data. Template variables are read-only.
I believe this is related to my ngModel but I don't really know how to fix this.

Answer 1

The problem was on the way I was passing the data to the templates.

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