2016-05-23 24 views
0

在Angular 2中,我有一個組件訂閱返回模型的服務,然後使用JsonPipe在<textarea>中顯示模型屬性。出於某種原因,顯示的屬性被引號包圍。這是爲什麼發生?Angular2 - 爲什麼JsonPipe使用引號包圍模型屬性?

我的代碼(假設有是正確填充模型中的服務):

/* example.ts */ 
export interface Example { 
    id: number; 
    description: string; 
} 

/* example.component.ts */ 
export class ExampleComponent { 
    public example: Object = Object; 

    constructor(private _exampleService: ExampleService) { 
     this._getExample(); 
    } 

    private _getExample() { 
     this._exampleService 
      .getExample() 
      .subscribe(example => this.example = <Example> example); 
    } 
} 

/* example.template.ts */ 
<form> 
    Description: <textarea>{{example.description | json}}</textarea> 
</form> 

這將呈現一個< textarea的>,看起來像這樣:

   _______________________________ 
Description: | "this is the description"  | 
       ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 

沒有理由引號圍繞字符串。到底是怎麼回事?

+1

嘗試'asych'管,而不是'json'管。請注意,'asych'管道將爲你訂閱()。 –

回答

2

從JavaScript文件https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

JSON.stringify('foo'); // '"foo"' 

現在讓我們看看angular2源代碼:

@Pipe({name: 'json', pure: false}) 
@Injectable() 
export class JsonPipe implements PipeTransform { 
    transform(value: any): string { return Json.stringify(value); } 
} 

https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/json_pipe.ts#L15

https://github.com/angular/angular/blob/master/modules/%40angular/facade/src/lang.ts#L422

相關問題