时间戳

首页 > 解决方案 > 如何在angular2中的动态表中放置一个按钮

angular - 如何在angular2中的动态表中放置一个按钮

问题描述

如何在不知道 DOM 引用 rowData.values 的情况下将按钮推送到 Array 将放置在表中按钮作为字符串放置，但我需要一个按钮，它作为字符串返回，尝试使用渲染器但没有运气。

<detail-table 
 [header]="summary.table.header" 
 [data]="summary.table.data$">


buildTableData(sourceData, kind: number, flags): core.DetailRow[] {
 let tableData: core.DetailRow[] = [];
 let nodeIdx = sourceData.length;
   while (nodeIdx--) {
     const sourceDataRow = sourceData[nodeIdx];
       const rowData = {
         id: sourceDataRow.id[0],
         values: [
              sourceDataRow.description,
              sourceDataRow.name
          ]
      };
      if (kind === 1) {
         const contentString = '<button #myButton (click)="onClicked()">Click Here!</button>';
         rowData.values.push(contentString  + "(" +sourceDataRow.number+ ")");
      }
      tableData.push(rowData);
 }
    return tableData;}

onClicked(){
     console.log("button Clicked!");
}

标签： angulartypescript

解决方案

插入按钮的方式不是应该如何使用角度。在组件 html 中移动按钮：

...
<button *ngIf="tableKind == 1" (click)="onClick.emit()">Click Here!</button>
...

onClick将是您的组件.ts 中的@Output。也tableKind将作为输入传递。

@Output() onClick: EventEmitter<any> = new EventEmitter();
@Input() tableKind: number;

然后你会<detail-table>这样打电话：

<detail-table 
 [header]="summary.table.header" 
 [data]="summary.table.data$"
 [tableKind]="kind"
 (onClick)="onClicked()">

推荐阅读