Можем ли мы добавить поля формы углового материала в div?

Question

У меня есть тег div, и я хочу добавить поля формы углового материала внутри этого div.Проблема в том, что это не рендеринг этих тегов.Можем ли мы сделать это любым способом?

введите описание изображения здесь

Answer 1

Угловой способ имеет массив объектов, e, g.

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>

Answer 2

Когда вы используете angular, никогда не манипулируйте DOM вручную (через собственные API DOM или jQuery).

Когда вы используете компонент или директиву в угловом шаблоне (т.е. html) вашего компонента), это не настоящий html, который преобразуется в javascript.Таким образом, когда приложение работает, где вы написали <mat-car> в своем шаблоне и вы также видите <mat-card> в DOM, это было фактически помещено туда кодом, сгенерированным angular, но также произошло много других вещей (т.е.mat-card компонент был инициализирован).

Когда вы просто поместите селектор компонентов вручную в DOM, ничего не произойдет, потому что компонент не инициализирован.Чтобы это работало, вы должны использовать компоненты материала из шаблона других компонентов.Читайте дальше: https://angular.io/guide/architecture-components

Предложение : даже не импортируйте jQuery в проект, таким образом, у вас даже не будет соблазна сделать это.