Блог

Невозможно получить функциональность нажатия кнопки, которая отображается в адаптивном коде таблицы ngPrime следующим образом: — HTML-код

  <p-table #myTable [columns]="cols"
             [value]="results"
             [responsive]="true" >
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    <span class="ui-column-title">{{col.header}}</span>
                    <div>
                       {{rowData[col.field]}}
                    </div>                  
                    <div *ngIf="col.header === 'Click Me' ">
                        <button
                            pButton
                            type="button"
                            (click)="showPopup(result.id)"
                            label="Send"
                            class="ui-button-info"
                        ></button>                       
                    </div>                  
                </td>
            </tr>
        </ng-template>     
    </p-table>
  

TS-код

  cols: any[];
 initColumns() {
        this.cols = [
            {field: 'id', header: 'Serial No'},
            {field: 'name', header: 'Name'},
            {field: 'status', header: 'Status'},
            {field: 'showPopup', header: 'Click Me'},
           
        ];
    }
  

Метод initColumns я вызываю в конструкторе.Нужная мне таблица является адаптивной, поэтому я использовал cols. Все значения являются динамическими, исходя из результатов. Только не удалось получить функциональность щелчка кнопки Click Me. Не удается прочитать свойство ‘id’ undefined. Приветствуется любая помощь.