如何在Angular 6中向div添加HTML标签或元素？

Question

我在一个模板中有一个 div，它的模板引用名称是 #divMessages。

<div  #divMessages></div>

当某些事件发生时，我想将HTML标签附加到此

中。我尝试了以下方法，但是HTML标签被附加为字符串。

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

我的当前方法将HTML标签视为字符串。我如何添加HTML标签来隐藏标签并仅显示数据。（这意味着仅显示列表项并在上述情况下隐藏标签）。

- Ali

---

可能类似的问题：https://dev59.com/FVcP5IYBdhLWcg3w5d0l - NiK648

谢谢，伙计。看来我没有完全爬取StackOverflow的内容。 - Ali

只需在div中使用ngFor，对数据数组进行迭代，并向数组添加数据。如果您在Angular中执行DOM操作，则做法是错误的。您修改模型，视图会自动更新。 - JB Nizet

Answer 1

我通过使用Renderer2抽象类来解决这个问题，它是Angular提供的一种服务，用于操作DOM元素。 从angular core导入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装饰器将divMessages作为div获取。

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

- Ali

Answer 2

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

在 TypeScript 中，您可以通过以下方式追加：

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

- Mohit