通过 javascript 动态生成 Angular 材质输入字段（检查参考代码，它不工作样式不工作）答案

【问题标题】：Dynamically Generate Angular material Input Field by javascript (check reference code it is not working style is not working)通过 javascript 动态生成 Angular 材质输入字段（检查参考代码，它不工作样式不工作）
【发布时间】：2018-08-01 12:59:02
【问题描述】：

当我拖放到新框时，此代码 Javascript 可帮助我生成新的 html 代码，但没有附带有角度的材质样式... 我已包含在 app.module.ts 中并制作了新的 angular-material.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>

【问题讨论】：

标签： javascript angular drag-and-drop angular-material-6

【解决方案1】：

使用 DOM 操作添加元素不会添加 Angular 组件。添加到 DOM 的元素只是 DOM，它不会包含 Angular 布线。您需要以“Angular”方式操作 DOM。请参阅 adding components dynamically 上的 Angular 文档

【讨论】：