Question

我的home.ts

中有这个JSON

  public json_html = {
    "button1":"<p><b>first section<b></p>",
    "button2":"<p>second section</p>",
    "button3":"<p><b>third section<b></p>",
  }

在我的home.html我希望看到三个链接 - button1，button2，button3 。如果单击按钮1，则需要使用以下代码显示其数据：

document.getElementById("c1").innerHTML+= "clicked content";

我怎样才能做到这一点？

Answer 1

我假设您可能有更多按钮，所以让我们构建一个循环。但首先，Angular2的ngFor指令不允许迭代对象，它们必须是数组。所以我们可以先在构造函数中获取一组键：

this.buttons = Object.keys(this.json_html);

然后我们可以在home.html中使用ngFor指令

<button ion-button *ngFor="let button of buttons" (click)="selectedButton = button">
  {{ button }}
</button>

然后我们可以添加到home.html一个div来显示html数据：

<div *ngIf="selectedButton" [innerHtml]="json_html[selectedButton]">
</div>

现在这非常简单，因为您将HTML编码为JSON对象。当数据变得更复杂时，我建议在Ionic上查看标签示例项目。

Answer 2

要实现这一目标，您应该按照以下步骤操作：

使用this.keysArr = Object.keys(this.json_html)创建一个对象键数组，因为我们无法在视图中迭代对象
使用<div *ngFor="let button of keysArr"></div>
在第2步的div内，声明另一个：<div [innerHTML]="json_html[button]"></div>

我使用[innerHTML]代替常规document.getElementById("c1").innerHTML+= "clicked content"，因为它看起来像＃34; Angular方式＆＃34;。以下是工作示例（在app文件夹中）：

https://stackblitz.com/edit/angular-9pyhg3?file=app/button-overview-example.html

<强>更新

＆＃34;它向我展示了所有3个数据，我希望看到button1，button2，button3并点击它以显示数据点击元素。目前它直接显示数据，你可以更新stackblitz＆＃34;

当然，这是：

https://stackblitz.com/edit/angular-9pyhg3-e49qys?file=app/button-overview-example.html

需要通过点击阅读home.html页面上的相关JSON数据

2 个答案: