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

Mikronman спросил: 12 мая 2018 в 05:06 в: javascript

Я работаю над проектом, который включает в себя предоставление информации о компонентах транспортных средств. Каждый компонент имеет набор описательных полей. У меня есть кнопка "Добавить другой компонент", которая должна создать идентичный контейнер 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 ответ

cgTag ответил: 12 мая 2018 в 05:11

Вы можете использовать *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