我的home.ts
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";
我怎样才能做到这一点?
答案 0 :(得分: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上查看标签示例项目。
答案 1 :(得分:1)
要实现这一目标,您应该按照以下步骤操作:
使用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