[英]Assign a method to Angular 7 two-way-binding
I am filling a treeTable
in Angular 7 with some values using a method. 我正在使用一种方法用一些值填充Angular 7中的
treeTable
。 Now I want to make them editable, but I am running into the following error using two-way binding for my input-fields: 现在,我想使它们可编辑,但是在输入字段中使用双向绑定时遇到以下错误:
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%'}">
At the moment I have three columns in my table where the third one should be the difference of the first two. 目前,我的表中有三列,第三列应该是前两列的差。 If I enlarge one of the first two, the third one is updated (praise Angular).
如果我放大前两个之一,则更新第三个(称赞Angular)。 Now I'd like to keep that, what means, that I need to use two-way-binding (I think).
现在,我想保留这个意思,这意味着我需要使用双向绑定(我认为)。 Sadly I cannot really tell his problems from the error I get.
可悲的是,我不能从我得到的错误中真正看出他的问题。 My method is the following:
我的方法如下:
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;
}
In my HTML: 在我的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>
How can I assign a method to that input-field? 如何为该输入字段分配方法?
Edit: 编辑:
After editing the code to this: 在将代码编辑为此之后:
HTML: 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>
And in my component: 在我的组件中:
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;
}
I am now getting the following error: 我现在收到以下错误:
TimeplannerComponent.html:31 ERROR Error: StaticInjectorError(AppModule)[TreeTableCellEditor -> TTEditableColumn]:
StaticInjectorError(Platform: core)[TreeTableCellEditor -> TTEditableColumn]:
NullInjectorError: No provider for TTEditableColumn!
Although missing some styles & the treeTableToggler
, I tried to set up a Stackblitz example 尽管缺少一些样式和
treeTableToggler
,我还是尝试建立一个Stackblitz示例
You can't, but what you should be able to do is use the event emitter. 您不能,但是您应该能够使用事件发射器。 Something like this.
这样的事情。
<input pInputText type="text" [ngModel]="getColumnValue(rowData, columns, i)" (ngModelChange)="setColumnValue(rowData, columns, i, $event)">
Stackblitz example Stackblitz示例
Note : The error you are getting refers to a missing directive. 注意 :您遇到的错误是指缺少指令。 If you check the documentation you'll notice in the editing section that you need the
ttEditableColumn
directive: 如果查看文档 ,则会在编辑部分中注意到您需要
ttEditableColumn
指令:
<td *ngFor="let col of columns; index as i" style="height: 40px" ttEditableColumn>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.