在下面的示例中,如何在x,y和total周围设置跨度标签,使其不是一个字符串?

 <div>
        {{GetNumbers()}}
    </div>

GetNumbers(){
const x = 10;
const y = 5;
total = 5;

return `${x} - ${y} of ${total}`;
}

#1楼 票数:2 已采纳

您可以将div的innerHTML属性设置为使用您的字符串,包括span标签:

<div [innerHTML]="GetNumbers()"></div>

GetNumbers(){
  const x = 10;
  const y = 5;
  const total = 5;

  return `<span>${x}</span> - <span>${y}</span> of <span>${total}</span>`;
}

StackBlitz: https ://stackblitz.com/edit/angular-vlp9au file = src%2Fapp%2Fapp.component.ts

  ask by jaikl translate from so

未解决问题?本站智能推荐:

2回复

如何在跨度中对齐角度标签内容

我需要正确对齐两个信息,即采购订单号和供应商,怎么做?
1回复

如何在组件标签中设置一个对象的样式angular

我想在这个组件标签内的 [text] 中添加一个样式 任何人都可以帮助我想添加样式
2回复

Angular服务返回值,但未显示在页面中

我正在从头开始学习Angular。 我创建了一个名为“ mylink”的组件,并为其创建了一个服务。 我试图使用'observable,of'和'subscribe'从服务返回一个字符串值。 该服务返回字符串,但是不会显示在网页中。 调试时,在组件中,它表明接收到的数据是“输入的意外结
2回复

从离子模板中的方法获取返回值

我试图从离子模板中的方法获取返回值。 我所知道并尝试的是以下内容:- <button (click) = "getReturn(parameter)">btn</button> 这只是我尝试过的一个示例,但是我知道如何获取返回值。
1回复

使用指令返回值

我有返回标题或null的此指令,如何在html组件中使用此返回值? 我想在工具提示标题中使用此值
2回复

如何在动态选择组件角度中的选择上设置默认值

我正在尝试为我的应用程序创建一个动态select组件。 在整个应用程序中,将以各种形式使用此组件。 在某些情况下,可能会有一些预定义的值可以提供给select ,在这种情况下,下拉列表会将值选择为默认值。 为了实现此功能,我查看了SO并找到了可以解决此问题的各种问题,但是我使用NgModu
2回复

如何基于Angular组件变量的值有条件地设置输入标签的最大值

我有3路输入控制定义如下 我想使用组件类变量的值动态设置2到1的范围,它不起作用
1回复

显示Firebase函数的返回值

做了更多阅读,更多编辑,现在我认为我的主要问题是当我在calculator.component.ts调用我的函数时再次我的 html 看起来是这样(从上次稍微编辑过): 应用程序组件.html 计算器.component.html 计算器.component.ts 最后,我的firebase函数in