如何以角度评估 <td> 标记中的方法返回的html？

Question

我在.ts 文件中有一个方法，它返回html 以在td 标记中动态制作按钮，但使用<td>{{actions(rec1)}}</td>，我得到的html 打印为 而不是动态按钮。请建议如何实现！

public actions(data) {
    let disabled = "";
    if (data.DASHBOARD_STATUS != "Failed" || data.addComment == 0) {
      if(data.addComment!=0 && this._defaultRegion == "APAC")
      {}
      else
      disabled = "disabled";
    }

    let hideCmt = "";
    if (data.addCommentAppConfig != "1") {
      hideCmt = "hidden";
    }

    let hideEmail = "";
    if (data.sendEmailAppConfig != "1") {
      hideEmail = "hidden";
    }
    else if (this._defaultRegion == "NAM") {
      if (data.DASHBOARD_STATUS == "Pending" || data.DASHBOARD_STATUS == "Incomplete")
        hideEmail = "hidden";
    }
    let hideDet = "";
    if (data.showDetailsAppConfig != "1") {
      hideDet = "hidden";
    }

    return '<button ' + hideCmt + ' id="btn_cmt" ' + disabled + ' class="DetailButton" style="margin-left:2px"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>' +
      '<span>&nbsp;&nbsp;</span>' +
      '<button ' + hideDet + ' id="btn_detail" class="DetailButton" style="margin-left:2px"><i class="fa fa-file-text" aria-hidden="true"></i></button>' +
      '<span>&nbsp;&nbsp;</span>' +
      '<button ' + hideEmail + ' id="btn_eml" class="DetailButton" title="Email" ng-disabled="true"><i class="fa fa-envelope" aria-hidden="true"></i></button>';
  }

Answer 1

借助 JSX，您只能通过 react 来做类似的事情。

但不是在 Angular 中，也许你应该考虑使用 element.append (yourHTML) 或创建一个 HTML 模板来绑定 TS 上的变量

const myHTML = '<div>Ciao</div>'

div.append(myHTML)
// OR
div.innerHTML(myHTML)

已编辑

<td #actionsTd></td> 

你需要在你的 .ts 中返回一个 var 你的 HTMLString

 const actionsHTML = this.actions() 

然后这样做：

querySelector('#actionsTd').innerHTML = actionsHTML

这是Javascript方式！

但是感谢 Angular，您可以像这样绑定变量：

<button [hidden]="isButtonHidden" [disabled]="isButtonDisabled"></button>

在您的 .ts 中

public isButtonHidden = true;
public isButtonDisabled = this.calculateIfButtonIsDisabled();