Question

我有以下对象：

{
  "cvaluevalve1": "D12",
  "cvaluevalve2": "D12",
  "cvaluevalve3": 0,
  "backvalue": "C07"
}

当我通过“ json”管道{{object | json}}，它应该以完整的JSON字符串形式出现。但是，我希望它看起来更像：

D12-D12-0-C07

我知道我可以使用{{object？.cvaluevalve1}}来显示每个对象，依此类推，但我想为此使用管道。如何使用管道来实现？我需要自定义管道吗？

谢谢。

Answer 1

Angular 6现在具有用于遍历对象的键值管道

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

更多参考信息keyvalue pipe

Answer 2

如果这只是一个组件中要使用的东西，然后该组件将在多个地方使用，而不是创建管道，则可以这样做：

obj = {
  "cvaluevalve1": "D12",
  "cvaluevalve2": "D12",
  "cvaluevalve3": 0,
  "backvalue": "C07"
}
value  = Object.values(this.obj).join('-')

在您的模板中：

{{ value }}

Answer 3

如果要在此处使用管道-

export class JsonPipe implements PipeTransform {
   transform(obj: any) : any{
      return Object.values(obj).join('-');
   }
}

如果您只想在视图中查看值-

value = Object.values(obj).join('-'); // component.ts
{{ value }} // component.html

Answer 4

您还可以尝试使用Underscore.js

    var obj = {
      "cvaluevalve1": "D12",
      "cvaluevalve2": "D12",
      "cvaluevalve3": 0,
      "backvalue": "C07"
    };
    var value = _.values(obj).join('-');

使用管道仅显示对象的值

4 个答案: