1

当我拖放到新框时，这段代码 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>

4

1 回答 1

1

使用 DOM 操作添加元素不会添加 Angular 组件。添加到 DOM 的元素只是 DOM，它不会包括 Angular 布线。您需要以“Angular”方式操作 DOM。请参阅有关动态添加组件的 Angular 文档

于 2018-08-01T20:35:09.213 回答