admin管理员组

文章数量:1415100

I'm trying to understand how Typescript and HTML are passing data.

(Typescript)

  public getContactByTradingPartnerId(tradingPartnerId: number):string {
    const map = {
        1001 : "[email protected]",
        2 : "[email protected]",
        11 : "[email protected]"
    }
    return map[tradingPartnerId] ?? "A contact has not been found for this trading partner."

(HTML)

<div class="example-element-description">
    {{element.tradingPartnerId}}
</div>

How can I pass the element.tradingpartnerid to the typescript function getContactByTradingPartnerId so that it renders the contact? (Example. the element.tradingPartnerId is 1001 so it renders [email protected] on the UI).

I'm trying to understand how Typescript and HTML are passing data.

(Typescript)

  public getContactByTradingPartnerId(tradingPartnerId: number):string {
    const map = {
        1001 : "[email protected]",
        2 : "[email protected]",
        11 : "[email protected]"
    }
    return map[tradingPartnerId] ?? "A contact has not been found for this trading partner."

(HTML)

<div class="example-element-description">
    {{element.tradingPartnerId}}
</div>

How can I pass the element.tradingpartnerid to the typescript function getContactByTradingPartnerId so that it renders the contact? (Example. the element.tradingPartnerId is 1001 so it renders [email protected] on the UI).

  • javascript
  • html
  • angular
  • typescript
Share Improve this question edited Jun 15, 2021 at 19:01 Giannis 1,8401 gold badge13 silver badges33 bronze badges asked Jun 15, 2021 at 14:21 cluis92cluis92 9422 gold badges21 silver badges46 bronze badges 1
  • from where is your element es? – tmsbrndz Commented Jun 15, 2021 at 14:33
Add a ment  | 

2 Answers 2

Reset to default 3

You can set inner HTML values of element in angular like: [innerHtml]="value"

So you can try:

<div class="example-element-description" 
    [innerHtml]="getContactByTradingPartnerId(element.tradingPartnerId)">
</div>

You can just call the typescript method within the {{}} (assuming the html view is linked to an angular ponent containing your function).

<div class="example-element-description">
    {{getContactByTradingPartnerId(element.tradingPartnerId)}}
</div>

Usually you'll want to avoid calling functions in the templating accolades.

本文标签： javascriptHow to render a function return to HTML (Angular)Stack Overflow

版权声明：本文标题：javascript - How to render a function return to HTML (Angular) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745166245a2645696.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。