在角度为4的表格中动态添加按钮

时间:2018-10-03 06:50:11

标签: angular frontend

您好,我正在开发将angular 4用作前端技术的Web应用程序。 我需要根据用户选项选择创建并显示各种表。可能有8到10个表,具体取决于用户选择的内容。

我是通过在用户选择时在组件中动态创建表头/数据来做到这一点的。

我只填充了LeaveColums(保持表标题)和LeaveData(保持表数据),然后在html页面中呈现它们。

switch (this.chartName) {
      case 'Employee': {
        if ('B' === this.selectedLabel) {
          this.leaveColums = this.employeeBalanceLeaveColumms;
          this.employeeService.getBalanceLeaves().subscribe(result => {
            for (let i = 0; i < result.length; i++) {
              let applyButton = '<button type="button" class="btn btn-success">Success</button>';
              let row = [result[i].leaveType.leaveType, result[i].availableBalance , applyButton];
              this.leaveData.push(row);
            }
          });
        } else {

          this.leaveColums = this.employeeeLeaveColumms;
          this.employeeService.getLeaves(this.selectedLabel).subscribe(result => {


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

              // Safari unable parse 2018-05-23T18:30:00.000+0000 format hence parse it
              let appliedOn = result[i].appliedOn.substring(0, result[i].appliedOn.length - 5);
              let leaveFrom = result[i].appliedOn.substring(0, result[i].leaveFrom.length - 5);
              let leaveTo = result[i].appliedOn.substring(0, result[i].leaveTo.length - 5);



              let row = [
                result[i].leaveType.leaveType,
                result[i].numberOfDays,
                this.pipe.transform(new Date(appliedOn), 'shortDate'),
                this.pipe.transform(new Date(leaveFrom), 'shortDate'),
                this.pipe.transform(new Date(leaveTo), 'shortDate'),
                result[i].leaveStatusId.statusDesc,
                result[i].leaveReason
              ];

             this.leaveData.push(row);

            }
          });
        }
      }

我的html页面是

<div>
    <table class="table-bordered table-striped">
        <th>{{chartName}}  {{selectedLabel}}</th>
        <tr>
            <th *ngFor="let column of leaveColums">{{column}}</th>
        </tr>
        <tr *ngFor="let row of leaveData">
            <td *ngFor="let data of row">{{data}}</td>
        </tr>
    </table>

</div>

但是问题是,当我尝试在任何列中添加按钮时,它没有显示为字符串而不是呈现按钮。

可能是由于将<或>字符转换为unicode即(>的<)。

如何解决此问题,我不想在html页面中添加if(如果已添加),因为我已经将if else写入了component.ts中以填充数据。

0 个答案:

没有答案