如何将 HTML 标签或元素附加到 Angular 6 中的 div？答案

【问题标题】：How to append HTML tags or elements to a div in Angular 6?如何将 HTML 标签或元素附加到 Angular 6 中的 div？
【发布时间】：2020-06-15 21:20:58
【问题描述】：

我在一个模板中有一个 div，它以 #divMessages 作为模板引用名称。

<div  #divMessages></div>

当某些事件发生时，我想将 HTML 标记附加到这个 div。我尝试了以下方式，但 HTML 标记作为字符串附加。

this.divMessages.nativeElement.append('<li>'+data.message+ '</li>');

我当前的方法将 HTML 标记视为字符串。我如何附加 HTML 标签，隐藏标签并仅显示数据。（表示在上述情况下只显示列表项，隐藏标签）。

【问题讨论】：

可能类似的问题：stackoverflow.com/questions/43682801/…
谢谢，看来我没有完全爬取 stackoverflow。
只需在 div 中使用 ngFor，遍历数组 pf 数据，然后将数据添加到数组中。如果您在 Angular 中进行 DOM 操作，那么您做错了。您修改模型，视图会自动更新。

标签： angular

【解决方案1】：

我通过使用 Renderer2 Abstract 类解决了这个问题，这是 Angular 提供的用于操作 DOM 元素的服务。从角核心导入 Renderer2。然后创建元素并将文本附加到它。

  import {Component, OnInit,NgModule, Renderer2 } from '@angular/core';

将 Renderer2 对象传递给类构造函数。

constructor(private http: HttpClient,private renderer:Renderer2) { }

//create the DOM element 
let li=this.renderer.createElement('li');

//create text for the element
const text = this.renderer.createText(data.message);

//append text to li element
  this.renderer.appendChild(li, text);

//Now append the li tag to divMessages div
this.renderer.appendChild(this.divMessages.nativeElement,li);

我使用@ViewChild 装饰器将 div 作为 divMessages 获取

 @ViewChild("divMessages", {read: ElementRef}) private divMessages: ElementRef;

【讨论】：

【解决方案2】：

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

在打字稿中你可以通过这种方式追加

var appendElement = '<li>'+data.message+'</li>' ;
this.divMessages = appendElement;

【讨论】：