Есть ли способ получить содержимое html из массива объектов?

Question

Я хочу добавить функцию щелчка к тегу привязки, который нужно извлекать из массива объектов. Есть ли способ получить только содержимое 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"
  },
 ]
}

faq. 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>

Answer 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
  }
}
}

Answer 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")
    }

}

Надеюсь, что это поможет