如何在 Angular 中设置动态 HTML 数据？答案

【问题标题】：How to set dynamic HTML data in Angular?如何在 Angular 中设置动态 HTML 数据？
【发布时间】：2019-12-12 21:07:58
【问题描述】：

我有来自后端 (Laravel) 的 HTML 形式的响应数据，我需要在 Angular 组件上显示。

component.ts 文件：

export class FaqComponent implements OnInit {

    constructor(
        private myService: MyDemoService
    ) { }

    public params = {
        lang: null,
        page_name: 'FAQ'
    };
    public faq = null;

    ngOnInit() {
        this.getAppContent();
    }

    getAppContent() {
        this.myService.getAppContent(this.params).subscribe(
            (response) => {
                this.handleResponse(response);
            },
            (error) => {
                console.log(error);
            }
        );
    }

    handleResponse(response) {
        if (response.status === 1) {
            this.faq = response.responseData.content;
        }
    }

}

在faq中保存回复后，faq中的数据如下：

<div id="accordion" class="custom-accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link "
                data-toggle="collapse"
                data-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne">
          Dummy Text <i aria-hidden="true" class="fa fa-angle-up ">&nbsp;</i>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show"
         aria-labelledby="headingOne"
         data-parent="#accordion">
      <div class="card-body">
        Accordion is working
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link "
                data-toggle="collapse"
                data-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne">
          Dummy Text <i aria-hidden="true" class="fa fa-angle-up ">&nbsp;</i>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show"
         aria-labelledby="headingOne"
         data-parent="#accordion">
      <div class="card-body">
        Accordion is working
      </div>
    </div>
  </div>
</div>

到目前为止我尝试了什么：

<div [innerHTML]="faq"></div>

文本与从后端获取的文本相同。但我不知道为什么它不起作用。手风琴没有像它必须的那样工作。请帮忙！

【问题讨论】：

你能显示哪些数据来自后端吗？
请告诉我们您如何检索数据以及数据应该是什么样的类型。除此之外，您可以通过{{variableName}} 以角度显示变量。
if (response.status === 1) { // 在这里检查，你是否在这里获取数据
handleResponse 何时调用？在 Onint？
@StepUp 这与我在“我在常见问题解答中的数据如下”这一行下面提到的相同：

标签： angular

【解决方案1】：

你需要使用render2类和appendChild方法

检查此answer。

【讨论】：