Блог

У меня есть метод в .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 amp;amp; 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>amp;nbsp;amp;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>amp;nbsp;amp;nbsp;</span>'  
      '<button '   hideEmail   ' id="btn_eml" class="DetailButton" title="Email" ng-disabled="true"><i class="fa fa-envelope" aria-hidden="true"></i></button>';
  }
 

Вы можете сделать что-то подобное только с react благодаря JSX.

Но не в Angular, возможно, вам следует подумать об использовании element.append (yourHTML) или создать HTML-шаблон, который связывает переменные в TS

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

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

Отредактировано

 <td #actionsTd></td> 
 

Вам нужно вернуть в переменную вашу HtmlString в ur .ts

  const actionsHTML = this.actions() 
 

И сделай это:

 querySelector('#actionsTd').innerHTML = actionsHTML
 

Это способ Javascript!

Но благодаря Angular вы можете связать переменные следующим образом:

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

и в вашем .ts

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