角度单击事件不适用于 jquery 响应式数据表中的扩展列

Question

我在 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>

角度点击事件应该可以正常工作。

Answer 1

只需将您的 (click)="selectedContract = selectedContract && selectedContract.id === contract.id ? null : contract" 更改为 (click)="selectedContractMethod()" 并将您的代码移动到 ts 文件中的 separate method。

selectedContractMethod() {
  // Paste your code here
}

希望它能解决您的问题。谢谢