2016-08-30 4 views
4

personInvolved 컴포넌트가 있습니다. 이 구성 요소에는 personDetails 구성 요소가 있습니다. personInvolved 구성 요소에 버튼이 있습니다. 내가 DOM에 personDetails를 추가해야하는 버튼의 Onclick. 클릭 할 때마다 personDetails 구성 요소를 추가해야합니다. 이것을 어떻게 할 수 있습니까?angular2의 버튼을 클릭하면 dom에 컴포넌트를 추가합니다.

+0

이 구성 요소를 제거하고 다시 때마다 그것을 만드시겠습니까 :

<button (click)="addPerson()">Add person</button> <person-details *ngFor="let person of persons" [person]="person"></person-details> 

그리고 구성 요소 코드에

? 또는 모든 클릭에 인스턴스를 계속 추가 하시겠습니까? –

+0

매번 해당 구성 요소 템플릿 URL을 추가하고 싶습니다. –

+1

다음 @JB Nizet의 아래 답변은 취해야 할 접근법입니다. –

답변

11

사용 ngFor :

persons: Array<Person> = []; 

addPerson() { 
    this.persons.push(new Person()); 
} 
+0

여기 personDetails는 templateURL을 가진 다른 구성 요소입니다. personInvolved 구성 요소에서 addperson 버튼을 클릭하면 personDetails를 추가해야합니다. 처음으로 를 추가합니다. 다음 번엔 클릭 할 때 하나 더 persondetails를 추가해야합니다. –

+0

여기에 새로운 Person() 메소드는 무엇입니까? –

+0

Working .. Thanks –

관련 문제