如何在角度组件中使用引导语法将对象显示为工具提示

Question

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

在一个角度组件 html 中，使用我这样编写的引导程序

<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)}}">