Question

我正在使用Angular 5，并且有一个返回JSON对象的Angular服务。

以下是使用该服务的组件：

  export class PageComponent implements OnInit {

  public wikiContents : Object;

  constructor(private data:MyWikiService) { }

  ngOnInit() {
    this.data.GetPageContent('1234').subscribe((data) => {
      this.wikiContents = data;
      console.log(this.wikiContents);
  }, error => {
     console.log(error);
  });
  }}

这在console.log（）中具有以下JSON对象

{
    "body": {
        "view": {
            "value": "<p>apples</p><p>oranges</p>",
        }
    }
}

我想在value键中显示HTML。我该怎么办？

更新：

从下面的答案中，一个人建议使用打字稿界面。我整个JSON的界面是这样的。如何将组件或服务映射到接口，然后在HTML文件中使用它？

export interface WikiInt {
  id: string;
  type: string;
  status: string;
  title: string;
  body: Body;
  extensions: Extensions;
  _links: Links;
  _expandable: Expandable;
}
export interface Body {
  view: View;
  _expandable: Expandable1;
}
export interface View {
  value: string;
  representation: string;
  _expandable: Expandable2;
}
export interface Expandable2 {
  webresource: string;
  content: string;
}
export interface Expandable1 {
  editor: string;
  export_view: string;
  styled_view: string;
  storage: string;
  anonymous_export_view: string;
}
export interface Extensions {
  position: string;
}
export interface Links {
  webui: string;
  edit: string;
  tinyui: string;
  collection: string;
  base: string;
  context: string;
  self: string;
}
export interface Expandable {
  container: string;
  metadata: string;
  operations: string;
  children: string;
  restrictions: string;
  history: string;
  ancestors: string;
  version: string;
  descendants: string;
  space: string;
}

Answer 1

只需在您的HTML文件中使用

<p>{{wikiContents.body.view.value}}</p>

Answer 2

我会做这样的事情，

TS：

export class PageComponent implements OnInit {

 public wikiContents: any; // Instead of Object

 constructor(private data: MyWikiService) {}

 ngOnInit() {
  this.data.GetPageContent('1234').subscribe((data) => {
   if(data){
   this.wikiContents = data;
   console.log(this.wikiContents);
   }
  }, error => {
   console.log(error);
  });
 }
}

和HTML：

<span *ngIf="response">
  <div [innerHTML]="response.body.view.value"></div>
</span>

无需创建界面，但是您可以阅读有关类型here的更多信息，并使用满足您要求的任何内容。

您可以参考this one，我发现它对打字稿中的类型很有用。

在Angular 5中显示来自组件的JSON值

2 个答案: