我在我的 Angular 6 应用程序中使用 jquery 响应式数据表。我想在每行的最后一个 td 放置两个按钮。但是没有一个事件对折叠的 tds 起作用。
在数据表上设置以下属性后,事件正在工作,但在每个事件之后,按钮都会重复。一开始我有2个按钮,点击按钮完成操作后,我得到4个按钮,并且按钮不断增加。
Datatable configuration:
const table: any = $('#contract-table');
table.DataTable().destroy();
this.dataTable = table.DataTable({
responsive: {
details: {
renderer: Responsive.renderer.listHiddenNodes()
}
}
});
Angular code:
<table class="table table-hover dt-responsive nowrap" id="contract-table" cellspacing="0">
<thead class="thead-dark">
<tr>
<th>Contract Number</th>
<th>Contract Title</th>
<th>Contract Type</th>
<th>DUNS</th>
<th>Cage Code</th>
<th>DoDAAC</th>
<th>DCMA Administered</th>
<th>Category</th>
<th>Customer/Agency</th>
<th>Customer/Agency Other</th>
<th>Contract Clauses</th>
<th>PWS/SOW Authroization Data</th>
<th>Contract Dollar Value</th>
<th>Contract Classification</th>
<th>Indefinite Delivery Contract</th>
<th>Indefinite Delivery Type</th>
<th>Contract Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let contract of contracts" (click)="selectedContract = selectedContract && selectedContract.id === contract.id ? null : contract" [ngClass]="{'selected-contract': selectedContract && selectedContract.id === contract.id}">
<td>{{contract?.contractNumber}}</td>
<td>{{contract?.title}}</td>
<td>{{contract?.contractType}}</td>
<td>{{contract?.duns}}</td>
<td>{{contract?.cageCode}}</td>
<td>{{contract?.doDAAC}}</td>
<td>{{contract?.dcmaAdministered ? 'Yes' : 'No'}}</td>
<td>{{contract?.category}}</td>
<td>{{contract?.customerAgency}}</td>
<td>{{contract?.customerAgencyOther}}</td>
<td>{{contract?.contractClauses}}</td>
<td>{{contract?.authorizationData}}</td>
<td>{{contract?.contractDollarValue}}</td>
<td>{{contract?.contractClassification}}</td>
<td>{{contract?.indefiniteDeliveryContract ? 'Yes' : 'No'}}</td>
<td>{{contract?.indefiniteDeliveryType}}</td>
<td>{{contract?.contractDescription}}</td>
<td>
<div class="row pull-right">
<div class="col pr-0">
<button mat-button class="btn btn-custom btn-bordred btn-block" (click)="onCreateSubContract('edit', contract)">Edit</button>
</div>
<div class="col">
<button mat-button class="btn btn-custom btn-bordred btn-block btn-create-sub-contract" (click)="onCreateSubContract('sub', contract)">Create Subcontract</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
角度点击事件应该可以正常工作。