2

我正在用 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是 typescript 中定义的地方

export class agencySearchResult {
  constructor() {};

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

  btnEdit: HTMLInputElement;
}

我认为问题在于{{r.btnEdit}} HTML 中的行，但我包括了所有相关的东西以防万一。

那么互联网，你如何将 javascript 生成的 HTML 元素插入到 turbotable 中？

4

1 回答 1

0

您最好在 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

于 2018-06-16T06:12:40.090 回答