我在项目中使用角度数据表模块，并使用
rowrollback我尝试不在我的
dtconfig这是我的代码：
dt选项：
dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
columns: [{
title: 'Current Owner',
data: 'CurrentOwner'
},{
title: 'Doc Hash',
data: 'hash'
},{
title: 'Doc Name',
data: 'name'
},{
title: 'Doc Owner',
data: 'DocumentOwner'
},{
title: 'Time Stamp',
data: 'Timestamp'
},{
title: 'Actions',
data: 'actions'
}],
rowCallback: (row: Node, data: Object |any[] , index: number) => {
try{
const self = this;
// Unbind first in order to avoid any duplicate handler
// (see https://github.com/l-lin/angular-datatables/issues/87)
$('td', row).unbind('click');
$('td', row).bind('click', () => {
let X ={};
Object.assign(X,data);
console.log(X)
console.log(this.Certificates[index]);
self.DetailedCertificate=this.Certificates[index];
$(this.detailRef.nativeElement);
$(this.detailRef.nativeElement).modal("show");
});
return row;
}
catch (e){
console.error("error"+e);
}
}
HTML 表格：
<tr *ngFor="let row of dataRows" class=".row" >
<td style="text-overflow: ellipsis; overflow-wrap: break-word">{{row.CO}}</td>
<td>{{row.KC}}</td>
<td>{{row.DocName}}</td>
<td>{{row.DocOwner}}</td>
<td>{{row.TimeStamp}}</td>
<td class="text-right">
<button class="btn btn-lg btn-simple btn-info btn-icon" (click)="CO(row.KC,row.DocOwner)"><i class="material-icons">person_pin_circle</i></button>
<button class="btn btn-lg btn-simple btn-danger btn-icon" (click)="RC(row.KC,row.DocOwner)"><i class="material-icons">close</i></button>
</td>
</tr>
这是一个 Angular 表格的示例，可以实现您想要的功能。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
dataRows: any[] = [
{ kc: 'kc1', docName: 'Document 1', docOwner: 'Johnny', timeStamp: 'last week'},
{ kc: 'kc2', docName: 'Document 2', docOwner: 'Jacob', timeStamp: 'yesterday'},
{ kc: 'kc3', docName: 'Document 3', docOwner: 'Jingleheimer', timeStamp: 'today'},
{ kc: 'kc4', docName: 'Document 4', docOwner: 'Schmidt', timeStamp: 'tomorrow'}
];
buttonInRowClick(event: any): void {
event.stopPropagation();
console.log('Button in the row clicked.');
}
wholeRowClick(): void {
console.log('Whole row clicked.');
}
}<table>
<tr>
<th>KC</th>
<th>Doc Name</th>
<th>Doc Owner</th>
<th>Time Stamp</th>
<th>Button</th>
</tr>
<tr *ngFor="let row of dataRows" (click)="wholeRowClick()">
<td>{{row.kc}}</td>
<td>{{row.docName}}</td>
<td>{{row.docOwner}}</td>
<td>{{row.timeStamp}}</td>
<td><button (click)="buttonInRowClick($event)">do thing</button></td>
</tr>
</table>此行将函数调用添加到 ngFor 生成的每一行。
<tr *ngFor="let row of dataRows" (click)="myFunction()">...</tr>确保行内按钮上的单击事件不会干扰整个行单击的关键是添加 event.stopPropagation();
在嵌套按钮调用的函数中。
您可以在 AfterViewInit 接口中使用 jquery 调用来调用 CO() 函数，如下所示。并通过在html中将其设置为id来获取'row.KC'值
ngAfterViewInit(){
var _thisDoc = this;
$('#user-table').on('click', '.btn-circle', function(){
_thisDoc.CO(this.id);
});
}
CO(e) {
console.log(e); //row.KC value
}
我在 2024 年使用 Angular 14 和 Angular-datatable 库遇到同样的情况。我解决了这个问题，所以我认为如果有人再次领导这个问题，分享很重要..
使用非角度方式来解决问题有点糟糕，但这就是我处理这种情况的方式，因为它就像你说的那样发生，即使你将（点击）指令放在按钮上，当数据出现时它似乎会忽略它表格已渲染。
我使用 Angular/core 中的 Renderer2 类来侦听单击事件并检查 DOM 解决了这个问题，然后如果事件中的标签带有我创建的特定类，那么我从该标签中检索 id，在这个case 是 user.id，然后我在我的用户列表中查找用户实例，我在 ngfor 中使用该实例将信息放在数据表上，所以我使用该实例来执行我想做的任何操作，这是代码：
组件代码*.ts:
users : AccountCRUD[];
constructor(private _usersService : UsersService, private _rendererDataTable: Renderer2) {
//any code you use in your constructor,
//the important this is to declare the _rendererDataTable attribute.
}
ngAfterViewInit():void{
//Note: we are using this solution instead of (click) native angular directive because
//we are using datatables and declaring the (click) is not working, so that's why
//we are using this one.
this._rendererDataTable.listen('document', 'click', (event) => {
//console.log(event);
//console.log(event.target);
if (event.target.className.includes('deleteButton')) {
let userInstanceId:string = event.target.getAttribute("id");
//console.log(userInstanceId);
let userInstance = this.users.find(u => u.UserId == userInstanceId);
this.logicDeleteUser(userInstance);
}
});
}
logicDeleteUser(user:AccountCRUD) : void{
//logictodelete
}
这就是我的组件模板（html）的样子：
<div class="d-flex justify-content-center">
<div class="col-12">
<div class="card">
<div class="header">
<button type="button" (click)="newUser()" class="btn btn-primary w3-animate-left">Agregar Usuario</button>
</div>
<div class="content">
<br/>
<table datatable [dtOptions]="dataTableOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
<tr>
<th>Usuario</th>
<th>Email</th>
<th>Rol</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users" >
<td>{{user.UserName}}</td>
<td>{{user.Email}}</td>
<td>{{ user.Role | userRolePipe }}</td>
<td>
<button id="{{user.UserId}}" type="button" class="btn btn-danger deleteButton">Eliminar</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>