【发布时间】：2021-03-20 03:21:29
【问题描述】：
我正在尝试通过在我的列上声明函数来动态绑定 PrimeNG TreeTable 中的更改事件。当我尝试使用我的列动态执行更改事件绑定时，它似乎在 TreeTable 内部不起作用。如果我在角度组件上声明函数并绑定它，我可以让它工作。
https://stackblitz.com/edit/primeng-treetableedit-demo-wezv7m?file=src/app/app.component.html
<p-treeTable [value]="files" [columns]="cols">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
<tr>
<td *ngFor="let col of columns; let i = index" ttEditableColumn [ngClass]="{'p-toggler-column': i === 0}">
<p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
<p-treeTableCellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="rowData[col.field]" [ngStyle]="{'width': i == 0 ? '90%': '100%'}" (change) ="col.change($event)">
</ng-template>
<ng-template pTemplate="output">{{rowData[col.field]}}</ng-template>
</p-treeTableCellEditor>
</td>
</tr>
</ng-template>
</p-treeTable>
ngOnInit() {
this.nodeService.getFilesystem().then(files => this.files = files);
this.cols = [
{ field: 'name', header: 'Name', change: (event) => console.log('Name Changed') },
{ field: 'size', header: 'Size', change: (event) => console.log('Size Changed') },
{ field: 'type', header: 'Type', change: (event) => console.log('Type Changed') }
];
}
我可以让绑定在 TreeTable 之外工作。 Angular 模板是否有一些我不理解的东西阻止它在 Tree Table 组件中工作？
https://stackblitz.com/edit/angular-ivy-z5gxtl?file=src/app/app.component.ts
【问题讨论】：
-
这里有点混乱——第一个链接似乎可以正常工作，最后一个链接也是如此。你能澄清一下你的代码示例没有按预期工作吗？
-
第一次堆栈闪电战中不会触发更改事件
-
事件确实在第一次堆栈闪电战中触发，但它发生在模糊时，而不是在输入或输入更改时发生。根据 MDN
(change)并不总是在输入值更新时触发 --> “与输入事件不同，更改事件不一定会在每次更改元素值时触发。”不确定您的最终目标是什么（触发任何输入值更新、触发输入等），但您可以尝试绑定到不同的事件类型，例如(input)而不是(change)。 -
那么我的两个例子有什么不同呢？在其他情况下，我正在绑定（更改）输入标签。
-
在功能上我看不出有什么区别——
console.log在两个示例中的触发方式相同。