通过javascript动态生成Angular材质输入字段(检查参考代码它不工作样式不工作)

Question

当我拖放到新框时，这个代码Javascript帮助我生成一个新的html代码，但带有角材质的样式是不附带的。。。我已经加入了app.module.ts，并制作了新的angular材料.ts，但它不起作用。

如果包括

<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

在dashboard.html中，它工作得很好，但当我使用Javascript时，它并没有像预期的那样工作。。风格不显。

有什么建议吗？

function nameFunction() {
var r = document.createElement('div');
var y = document.createElement("INPUT");
r.setAttribute("value", "Name");
r.innerHTML = '<form class="example-form"><mat-form-field class="example-full-width"> <input matInput placeholder="Favorite food" value="Sushi"> </mat-form-field> <mat-form-field class="example-full-width"> <textarea matInput placeholder="Leave a comment"></textarea> </mat-form-field> </form>';
y.setAttribute("type", "text");
y.style.float = "left";
r.style.float = "left";
r.style.margin = "1%";
var g = document.createElement("i");
g.setAttribute("class", "fas fa-times-circle text-danger pl-2 pr-2");
increment();
y.setAttribute("Name", "textelement_" + i);
r.appendChild(y);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.appendChild(g);
r.setAttribute("id", "label" + i);


document.getElementById("myForm").appendChild(r);
}

<div class="row">
<div class="col-md-12" [style.background]="color" id="newArea" (drop)="drop($event)" (dragover)="allowDrop($event)" [style.background]="color1" style=" padding: 10px; min-height: 550px;"> 
</div>
</div>

Answer 1

使用DOM操作添加元素不会添加Angular组件。添加到DOM中的元素只是DOM，它将不包括Angular连接。您需要以"Angular"的方式操作DOM。请参阅Angular文档中关于动态添加组件的