HTML 使用JSON HTML从Yahoo API中提取新闻
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 使用JSON HTML从Yahoo API中提取新闻相关的知识，希望对你有一定的参考价值。
使用 Angular 8 从 JSON 渲染 HTML
【中文标题】使用 Angular 8 从 JSON 渲染 HTML【英文标题】：Rendering HTML from JSON with Angular 8 【发布时间】：2020-06-23 05:56:35 【问题描述】：我有一个 Angular 故事书，里面有组件。
我在一个组件的 stories.ts 中有一点 JSON，其中一个属性是 DIV 的内容，就像这样......
"accordionLink": 'Accordion link 1',
"accordionContent": "<p>Hello World!</p>",
模板 HTML 看起来像这样...
<li *ngFor="let accordionItem of accordionData; let i = index;">
<a href="javascript:;" class="accordion-trigger" (click)="toggleAccordian($event, i)">
accordionItem.accordionLink
</a>
<div hide="!isActive">
<div class="inner row">
<div [innerHtml]="accordionItem.accordionContent"></div>
</div>
</div>
</li>
我尝试让“accordionContent”HTML 在插值所在的实际 DIV 中呈现出来，但我只能显示实际的字符串 (
Hello World!
），而不是应用了所有样式等的段落...由于 DIV 的内容需要灵活（段落、列表等），如果可能的话，我希望能够将 HTML 放入容器中。
任何帮助将不胜感激。谢谢！
编辑：
在 stories.ts 文件中，我的数据设置如下...
const mockData = [
"accordionLink": 'Accordion link 1',
"accordionContent": '<p>1 - Lorem ipsum dolor.</p>',
,
"accordionLink": 'Accordion link 2',
"accordionContent": '<p>2 - Lorem ipsum dolor.</p>',
,
"accordionLink": 'Accordion link 3',
"accordionContent": '<p>3 - Lorem ipsum dolor.</p>',
,
];
在同一个文件中，我将我的故事设置为在 Storybook 中显示，如下所示...
template: `<ui-accordion [accordionData]="accordionData"></ui-accordion>`,
props:
accordionData: object('Content', mockData, 'General'),
在我的组件的 .ts 文件中，我将内容设置为输入...
@Input() accordionData: any;
【问题讨论】：
【参考方案1】：您可以通过ngx-markdown 实现此目的
并将您的 json HTML 绑定到 [data]：
<li *ngFor="let accordionItem of accordionData; let i = index;">
<a href="javascript:;" class="accordion-trigger" (click)="toggleAccordian($event, i)">
accordionItem.accordionLink
</a>
<div hide="!isActive">
<div class="inner row">
<markdown [data]="accordionItem.accordionContent"></markdown>
</div>
</div>
</li>
【讨论】：
【参考方案2】：获取 json 数据的地方需要改进。我做了同样的事情，它正在工作：
jsonData = [
accordionLink: "Accordion link 1",
accordionContent: "<p>Hello World!</p>"
];
accordionData: any;
constructor()
this.accordionData = this.jsonData;
示例： https://codesandbox.io/s/cold-flower-9ktdk?fontsize=14&hidenavigation=1&theme=dark
谢谢。
【讨论】：
您好，感谢您的回复。 jsonData 在 stories.ts 中，而不是在组件的 .ts 文件中。 这只是一个示例，您可以按照自己的方式进行操作。无论您拥有什么组件文件，您都可以在 story.ts 文件中定义数据并在 story.html 文件中绑定相同的数据。 嗨。我已经测试了你的方法，它有效。我的问题是，当我将 JSON 移动到 stories.ts 文件时，Storybook 将输出呈现为字符串而不是格式化的 HTML。 您能否编辑您的帖子并将您拥有的代码添加到 stories.ts 文件中。 编辑了我的帖子。谢谢。【参考方案3】：尝试使用innerHTML 而不是innerHtml
<div [innerHTML]="accordionItem.accordionContent"></div>
【讨论】：
以上是关于HTML 使用JSON HTML从Yahoo API中提取新闻的主要内容，如果未能解决你的问题，请参考以下文章
通过 jQUERY 将 JSON 数据从 URL 解析为 HTML
如何理解 Yahoo! 的原始 HTML使用 Python 检索数据时的财务？