尝试在 ng-template 中使用 ngModel答案

【问题标题】：Trying to use ngModel inside of ng-template尝试在 ng-template 中使用 ngModel
【发布时间】：2022-11-15 00:43:25
【问题描述】：

我正在尝试使用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 有关，但我真的不知道如何解决这个问题。

【问题讨论】：

标签： angular primeng ngmodel ng-template ng-container

【解决方案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>

【讨论】：