為Angular 7雙向綁定分配方法

Question

我正在使用一種方法用一些值填充Angular 7中的treeTable 。 現在，我想使它們可編輯，但是在輸入字段中使用雙向綁定時遇到以下錯誤：

Uncaught Error: Template parse errors:
Parser Error: Unexpected token '=' at column 36 in [getColumnValue(rowData, columns, i)=$event] in ng:///AppModule/myComponent.html@32:44 ("leCellEditor>
          <ng-template pTemplate="input">
              <input pInputText type="text" [ERROR ->][(ngModel)]="getColumnValue(rowData, columns, i)" [ngStyle]="{'width':'100%'}">

目前，我的表中有三列，第三列應該是前兩列的差。 如果我放大前兩個之一，則更新第三個（稱贊Angular）。 現在，我想保留這個意思，這意味着我需要使用雙向綁定（我認為）。 可悲的是，我不能從我得到的錯誤中真正看出他的問題。 我的方法如下：

getColumnValue(rowData: any[], columns: any, i: number): number {
    let col = columns[i];
    let val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    if (col.field == 'diff') {
      col = columns[i-2];
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
      col = columns[i-1];
      val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    }
    return val;
  }

在我的HTML中：

<tr *ngIf="rowData.hours">
      <td *ngFor="let col of columns; index as i" style="height: 40px">
      <p-treeTableCellEditor>
          <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="getColumnValue(rowData, columns, i)" [ngStyle]="{'width':'100%'}">
          </ng-template>
          <ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
      </p-treeTableCellEditor>
      </td>
    </tr>

如何為該輸入字段分配方法？

編輯：

在將代碼編輯為此之后：

HTML：

   <tr *ngIf="rowData.hours">
        <td *ngFor="let col of columns; index as i" style="height: 40px">
            <p-treeTableCellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)" [ngStyle]="{'width':'100%'}">
                </ng-template>
                <ng-template pTemplate="output">{{getColumnValue(rowData, columns, i)}}</ng-template>
            </p-treeTableCellEditor>
          </td>
    </tr>

在我的組件中：

setColumnValue(rowData: any[], columns: any[], i: number, text: string) {
    let col = columns[i];
    rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field] = Number(text);
  }

  getColumnValue(rowData: any[], columns: any, i: number): number {
    let col = columns[i];
    let val;
    if (col.field == 'diff') {
      col = columns[i-2];
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
      col = columns[i-1];
      val = val - rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    } else {
      val = rowData['hours'].find(entry => entry.year === col.year && entry.month === col.month)[col.field];
    }
    return val;
  }

我現在收到以下錯誤：

TimeplannerComponent.html:31 ERROR Error: StaticInjectorError(AppModule)[TreeTableCellEditor -> TTEditableColumn]: 
  StaticInjectorError(Platform: core)[TreeTableCellEditor -> TTEditableColumn]: 
    NullInjectorError: No provider for TTEditableColumn!

盡管缺少一些樣式和treeTableToggler ，我還是嘗試建立一個Stackblitz示例

Answer 1

您不能，但是您應該能夠使用事件發射器。 這樣的事情。

<input pInputText type="text" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)">

Stackblitz示例

注意 ：您遇到的錯誤是指缺少指令。 如果查看文檔 ，則會在編輯部分中注意到您需要ttEditableColumn指令：

<td *ngFor="let col of columns; index as i" style="height: 40px" ttEditableColumn>