如何在 angular 组件中使用 bootstrap 语法将对象显示为工具提示

Question

我有一个这样的对象 var obj = {"test price type ty dynamic ": 10, test: 7, pricetype1u: 0, Price type 3: 0, Price type 2: 0}

在 angular 组件 html 中，使用 bootstrap 我这样写

<button type="button" 
        icon="file-excel" 
        data-toggle="tooltip" 
        data-placement="top"
        title="{{obj}}">

        <span class="k-icon k-i-info"></span>
</button>

工具提示显示为（对象）：

{
  "test price type ty dynamic ": 10, 
   "test": 7, 
   "pricetype1u": 0, 
   "Price type 3": 0, 
   "Price type 2": 0  
}

我的要求是像这样显示工具提示

  test price type ty dynamic : 10
  test : 7
  pricetype1u : 0
  Price type 3 : 0
  Price type 2 : 0

请帮助我如何获得所需的格式

Answer 1

如果您对所有对象工具提示都有此要求，则应考虑管道。将下面的实现复制到管道中应该是可行的。

如果你只需要一次这种格式，你可以写一个简单的函数来处理它：

function convertObjTooltip(obj: any) {
    const results = [];
    Object.keys(obj).reduce((sum, key) => {
        sum.push(`${key}: ${obj[key]}`);
        return sum;
    }, results);
    return results.join('\n');
}

我没有去掉第一个更改行，你自己处理。

在您的模板中调用它：

<button type="button" 
    icon="file-excel" 
    data-toggle="tooltip" 
    data-placement="top"
    title="{{convertObjTooltip(obj)}}">

如何在 angular 组件中使用 bootstrap 语法将对象显示为工具提示

How to show an object as tooltip using bootstrap syntax in angular component

javascript

angularjs

angular-ui-bootstrap

bootstrap-4

angular