События угловых нажатий, не работающие с расширенными столбцами в jquery - PullRequest
Новая
       22

События угловых нажатий, не работающие с расширенными столбцами в jquery

0 голосов
/ 28 марта 2019

Я использую отзывчивые данные jquery с моим угловым приложением 6.Я хочу поставить две кнопки в последний тд в каждом ряду.Но ни одно из событий не работает на рухнул ТД.

После установки свойства data в таблице ниже, события работают, но после каждого события кнопки повторяются.Сначала у меня есть 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>

события углового щелчка должны работать нормально.

1 Ответ

0 голосов
/ 29 марта 2019

Просто измените ваш (click)="selectedContract = selectedContract && selectedContract.id === contract.id ? null : contract" на (click)="selectedContractMethod()" и переместите ваш код в отдельный метод в ts файле. 

selectedContractMethod() {
  // Paste your code here
}

Я надеюсь, что это будетрешить вашу проблему.Спасибо

...