有没有办法从对象数组中获取 html 内容？答案

【问题标题】：Is there a way to fetch html content from array of object?有没有办法从对象数组中获取 html 内容？
【发布时间】：2020-05-26 12:31:07
【问题描述】：

我想将点击功能添加到需要从对象数组中获取的锚标记。有没有办法只从对象数组中获取 html 内容？

这是我得到的示例响应示例。从这里我想从每个对象和每个 "faq_answer" 获取 "faq_answer"，我想获取 锚标记 并添加一个锚标记的 onclick 功能。

{
 "result_status": true,
 "data": [
   {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
 ]
}

常见问题.html

这是我正在显示的模板文件。

<ion-list *ngIf="item.faq_answer && item.open" no-lines class="faq_lst" [ngClass]="{'rtl': item.language!='0', 'ltr': item.language=='0'}">
  <div>
    <p [innerHTML]="item.faq_answer | safeHtml"></p>
  </div>
</ion-list>

【问题讨论】：

已修复 :) 谢谢。你对这个解决方案有什么想法吗？
.forEach() + .createElement() + .addEventListener() - 但由于您添加的标签，这些方法已被淘汰。请添加一个minimal reproducible example，其中包含示例输入和预期输出。
这意味着我必须遍历我的 json 数据，并且对于每个项目，我必须创建一个元素并附加一个事件侦听器函数，对吗？哦，好吧，但是如果 json 数据很重，这不是一个好方法吗？
在所有元素都存在的父div上添加点击处理程序，事件冒泡将启用点击每个元素。通过检查目标，您可以验证单击了哪个元素。
@AakashGarg 您好，我也添加了我的 html 代码，请查看并帮我修改

标签： javascript html angular ionic-framework

【解决方案1】：

HTML 代码：-

<div (click)="elementClicked($event)" id="dataContainer">
  <div *ngFor="let item of values.data" [innerHTML]="item.faq_answer | safeHtml"></div>
</div>

TypeScript 代码：-

import { Component } from '@angular/core';
import sdk from '@stackblitz/sdk';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public values = {
 "result_status": true,
 "data": [
   {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "84",
    "language": "0",
    "faq_question": "Question1",
    "faq_answer": "<p>From Sunday to Thursday, 9 am to 5.30 pm (UAE time).</p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
  {
    "faq_id": "89",
    "language": "0",
    "faq_question": "Question 2",
    "faq_answer": "<p>Google. For more information visit the website <a href=\"https://www.google.com/\">www.google.com</a></p>\r\n",
    "display_order": "0",
    "is_active": "1"
  },
 ]
}

public elementClicked(event) {
  var elem = event.target;
  alert(elem);
  if(elem.tagName.toLowerCase() === 'a') {
    //perform your logic
  }
}
}

【讨论】：

【解决方案2】：

你可以把点击事件监听器放在你的<p>标签中

<ion-list *ngIf="item.faq_answer && item.open" no-lines class="faq_lst" [ngClass]="{'rtl': item.language!='0', 'ltr': item.language=='0'}">
  <div>
    <p [innerHTML]="item.faq_answer | safeHtml"
       (click)="onAnswerClicked($event)">
    </p>
  </div>
</ion-list>

然后在你的点击事件监听器中：

onAnswerClicked(event: any)
{
    let target: any = event.target;

    // Check if the one that is clicked is an <a> link
    if (event.target.tagName == "A")
    {
       // If you want to disable the <a> default behavior
       // event.preventDefault()

       // If you want to get the href..
       // event.target.getAttribute("href")
    }

}

希望有帮助

【讨论】：