Angular2 - 为什么 JsonPipe 用引号将模型属性括起来？

Question

在 Angular 2 中，我有一个组件订阅 returns 模型的服务，然后使用 JsonPipe 在 中显示模型 属性。出于某种原因，显示的 属性 被引号括起来。为什么会这样？</p> <p>我的代码（假设有一个服务可以正确填充模型）：</p> <pre><code>/* 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> </code></pre> <p>这将呈现如下所示的 <textarea>：</p> <pre><code> _______________________________ Description: | "this is the description" | ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ </code></pre> <p>没有理由用引号将字符串括起来。这是怎么回事？</p> </section> <div> <section class="answer"> <p>来自 javascript 文档 <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="nofollow">https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify</a></p> <pre><code>JSON.stringify('foo'); // '"foo"' </code></pre> <p>现在让我们看看angular2源码：</p> <pre><code>@Pipe({name: 'json', pure: false}) @Injectable() export class JsonPipe implements PipeTransform { transform(value: any): string { return Json.stringify(value); } } </code></pre> <p><a href="https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/json_pipe.ts#L15" rel="nofollow">https://github.com/angular/angular/blob/master/modules/%40angular/common/src/pipes/json_pipe.ts#L15</a></p> <p><a href="https://github.com/angular/angular/blob/master/modules/%40angular/facade/src/lang.ts#L422" rel="nofollow">https://github.com/angular/angular/blob/master/modules/%40angular/facade/src/lang.ts#L422</a></p> </section> </div> </div> <div class="line"></div> <div id="footer">©2023 WhoseBug</div> </body> </html>