使用 PrimeNG 組件和 Angular 更改事件綁定

Question

我試圖通過在我的列上聲明函數來動態綁定 PrimeNG TreeTable 中的更改事件。 當我嘗試使用我的列動態執行更改事件綁定時，它似乎在 TreeTable 內部不起作用。 如果我在 angular 組件上聲明 function 並綁定它，我可以讓它工作。

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 模板的某些我不明白的東西阻止它在樹表組件中工作？

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