我们可以在 div 中附加角度材料表单字段吗？答案

【问题标题】：Can we append angular material form fields within a div?我们可以在 div 中附加角度材料表单字段吗？
【发布时间】：2019-09-27 08:57:04
【问题描述】：

我有一个 div 标记，我想在该 div 中附加角度材料表单字段。问题是它没有呈现该标签。我们可以用任何方法做到这一点吗？

enter image description here

【问题讨论】：

向我们展示您已经尝试过的内容。
显示代码！！
请点击图片上方的文字链接，您会看到的。
为什么不使用 ngIf 代替注入呢？是否要多次添加？
如果你想添加不止一次你可以使用ngFor。

标签： javascript html angular angular-material

【解决方案1】：

角度方式有一个对象数组，例如

data=[{placeholder:"Enter Name",label:"Name"},
      {placeholder:"Enter surname",label:"Surname"}]

做一些喜欢

<mat-card *ngFor="let item of data">
   <div class="row">
     {{item.label}}<input mat-input [placeholder]="item.placeholder">
   </div>
</mat-card>

【讨论】：

【解决方案2】：

当您使用 Angular 时，切勿手动操作 DOM（通过本机 DOM API 或 jQuery）。

当您在角度模板（即组件的 html）中使用组件或指令时，这不是真正的 html，而是转换为 javascript。因此，当应用程序运行时，您在模板中写了 <mat-car> 并且您还在 DOM 中看到了 <mat-card>，这实际上是由 angular 生成的代码放在那里的，但也发生了很多其他事情（即mat-card 组件已初始化）。

当你只是手动将组件选择器放入 DOM 时，什么都不会发生，因为组件没有初始化。要使其工作，您必须使用来自另一个组件模板的材料组件。延伸阅读：https://angular.io/guide/architecture-components

建议：根本不要将jQuery 导入到项目中，这样你甚至都不会被诱惑这样做。

【讨论】：