вставить сгенерированный элемент javascript в primeng turbotable?

Я заменяю сделанный на заказ стол на турботабль PrimeNG. У меня есть несколько кнопок, которые мне нужно вставить в таблицу, которые вызывают специальные функции javascript, которые я написал, но я застрял на том, как вставить элемент в таблицу.

Он отображается как [object HTMLInputElement], а не как кнопка. Я знаю, что код, который генерирует кнопку, хорош, потому что он отлично работал в старой настройке таблицы. Я думаю, проблема в том, что он превращает его в текст, и я не уверен, как сделать так, чтобы он оставался HTML.

Это то, что отображается.

введите описание изображения здесь

Вот турботабль

              <p-table [columns]="resultsCols" [value]="results">
                <ng-template pTemplate="caption">
                  Agencies  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  Count {{results?.length}}
                </ng-template>
                <ng-template pTemplate="header">
                  <tr>
                    <th >Options</th>
                    <th [pSortableColumn]="'agency'" >Agency</th>
                    <th [pSortableColumn]="'department'" class="ui-p-2">Department</th>
                    <th [pSortableColumn]="'affiliateCount'" class="ui-p-4">Affiliate Count</th>
                    <th [pSortableColumn]="'basigdate'" class="ui-p-6">BA Sig Date</th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-r>
                  <tr>
                    <td>  {{r.btnEdit}}</td>
                    <td >{{r.agency}}</td>
                    <td class="ui-p-2">{{r.department}}</td>
                    <td class="ui-p-4">{{r.affiliateCount}}</td>
                    <td class="ui-p-6">{{r.basigdate}}</td>
                  </tr>
                </ng-template>
              </p-table>

Вот как я создаю кнопку и заполняю массив результатов

var result = JSON.parse(xmlhttp.responseText);

for (var i = 0; i < result.length; i++) {

  var inputEdit = document.createElement("input");
  inputEdit.type = "button";
  inputEdit.value = "Edit";
  inputEdit.classList.add("btn-link");
  inputEdit.onclick = (
    function(i) {
      return function() {
        comp.setEditMode(i);
      }
    }
  )(result[i].id);


  var a = new agencySearchResult();
  a.agency = result[i].name;
  a.affiliateCount = result[i].affiliateCount;
  a.basigdate = result[i].baSigDate;
  a.department = result[i].department;
  a.btnEdit = inputEdit;

  comp.results.push(a); 
}

Наконец, вот где agencySearchResult определяется в машинописном тексте.

export class agencySearchResult {
  constructor() {};

  agency: string;
  department: string;
  affiliateCount: string;
  basigdate: string;

  btnEdit: HTMLInputElement;
}

Я думаю, что проблема в строке {{r.btnEdit}} в HTML, но на всякий случай я включил все необходимые вещи.

Итак, Интернет, как вставить HTML-элемент, сгенерированный javascript, в турбулизатор?


typescript angular primeng primeng-turbotable
person Joseph Doss    schedule 15.06.2018    source источник
comment
Почему вы создаете свою кнопку в TS, а не в HTML?   -  person Antikhippe    schedule 15.06.2018
comment
Таким образом, я могу передать ему сложную функцию onclick, которую я, похоже, не могу сделать с кнопкой, созданной на стороне html.   -  person Joseph Doss    schedule 15.06.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам лучше написать кнопку HTML внутри файла компонента HTML, а не генерировать ее в коде TS.

Поэтому я предлагаю вам заменить

<td>  {{r.btnEdit}}</td>

а также

var inputEdit = document.createElement("input");
  inputEdit.type = "button";
  inputEdit.value = "Edit";
  inputEdit.classList.add("btn-link");
  inputEdit.onclick = (
    function(i) {
      return function() {
        comp.setEditMode(i);
      }
    }
  )(result[i].id);

с чем-то вроде

<td><input type="button" value="Edit" class="btn-link" (click)="edit(r.id)"/></td>

а также

edit(rowId) {
    alert('Edition of row ' + rowId);
    // do whatever you need
}

что гораздо более лаконично и читабельно.

См. Этот StackBlitz

person Antikhippe    schedule 16.06.2018