加载一些JSON对象

Question

我加载一些JSON：

[{ 
     "id": "0a4bf3b5bb5f47ece9284052389ae02f6c9dba989ca34086a30e049ee3d8eb47", 
     "name": "Celery", 
     "status": "Offline", 
     "servicecontrolled": true 
}, 
{ 
     "id": "ec9471ec001c10b9fa286e1f52e39c5dc9485a7c2cfbf55145c26242bb98ec4d", 
     "name": "Nginx", 
     "status": "Online", 
     "servicecontrolled": false 
}] 

，并显示在HTML servicecontrolled：

<td> 
    <span>{{ service_rec.servicecontrolled }}</span> 
</td> 

如何只"servicecontrolled": true HTML代码中显示？

Answer 1

编辑：

现在的问题是更精确，你可以做的是：

<td> 
    <span *ngIf="!!service_rec.servicecontrolled">"servicecontrolled": {{ service_rec.servicecontrolled | json }}</span> 
</td> 

老答案（以为你想显示“真”或“假” ）： 什么：

<td> 
    <span>"servicecontrolled": {{ service_rec.servicecontrolled | json }}</span> 
</td> 

好像一招，b ut非常直接...

或者你可以写一个布尔管道，将布尔格式设置为字符串（请参阅https://angular.io/docs/ts/latest/guide/pipes.html）。

喜欢的东西：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'booleantostring'}) 
export class BooleanToStringPipe implements PipeTransform { 
    transform(value: boolean): string { 
    return (!!value) ? 'true' : 'false'; 
    } 
} 

然后，在你的HTML（与在@component装饰的pipes键加载的管道）：

<td> 
    <span>"servicecontrolled": {{ service_rec.servicecontrolled | booleantostring }}</span> 
</td> 

Answer 2

你的JSON语法不正确。 它应该看起来像：

[ 
    { 
     "id": "0a4bf3b5bb5f47ece9284052389ae02f6c9dba989ca34086a30e049ee3d8eb47", 
     "name": "Celery", 
     "status": "Offline", 
     "servicecontrolled": true 
    }, 
    { 
     "id": "ec9471ec001c10b9fa286e1f52e39c5dc9485a7c2cfbf55145c26242bb98ec4d", 
     "name": "Nginx", 
     "status": "Online", 
     "servicecontrolled": false 
    } 
] 

然后你就可以用

<div *ngFor='let value of values' *ngIf='value.servicecontrolled'> 
    {{ value.name }} 
</div>