加載一些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>