Angular 6 - Как мне клонировать / дублировать div в машинописи? - PullRequest
Новая
       11

Angular 6 - Как мне клонировать / дублировать div в машинописи?

0 голосов
/ 05 июня 2018

Я работаю над проектом, который предусматривает предоставление информации о компонентах автомобиля.Каждый компонент имеет набор описательных полей.У меня есть кнопка «Добавить еще один компонент», которая должна создать идентичный контейнер div с теми же полями.Разумеется, для клонированного родительского div потребуется другой идентификатор.Например:

В html-файле компонента: 

<div id="component-outer">
    <div class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="clone()">Add Another Component</div>

В файле ts компонента: 

export class AppComponent {
    clone(){
         Need to clone #component-outer div and append below the last instance 
         of that div, then append the div name on the cloned element.
    }
}

Я привык использовать javascript / jQuery для клонирования элементов, но не могу найти лучший подход к ТОЧНО, что я пытаюсь сделать в Angular.Является ли клонирование правильным подходом?

1 Ответ

0 голосов
/ 05 июня 2018

Вы можете использовать *ngFor для создания элементов DOM для каждого элемента в массиве. 

<div id="component-outer">
    <div *ngFor="let item of items" class="component-inner">
         Component Content....
    </div>
</div>
<button type="button" (click)="append()">Add Another Component</div>

export class AppComponent {
     public items: any[];

     public append() {
          this.items.push({
              // values depend on what an item is
          });
     }
}

Это описано в документации first главы первый учебник.

https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

...