使用 PrimeNG 组件和 Angular 更改事件绑定

Question

我试图通过在我的列上声明函数来动态绑定 PrimeNG TreeTable 中的更改事件。当我尝试对我的列进行动态更改时，更改事件绑定在 TreeTable 内部似乎不起作用。如果我在 angular 组件上声明函数并绑定它，我就能让它工作。

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

Answer 1

我错过了 PrimeNG 文档中的一些重要信息。看起来 PrimeNG 组件正在捕捉变化。我需要使用 'onEditComplete' 事件来捕获并添加一些额外的绑定来实现我的目标。

<td [ttEditableColumn]="rowData" [ttEditableColumnField]="col.feild">

http://primefaces.org/primeng/showcase/#/treetable

使用 PrimeNG 组件和 Angular 更改事件绑定

Change event binding with PrimeNG Components and Angular

primeng

angular