Angular2 동적으로 양식 필드 추가/제거

Question

addNewChoice를 클릭했지만 여전히 실패 할 때 필드를 선택 배열에 동적으로 추가하려고합니다.

<form class="form-inline"> 
    <fieldset *ngFor="let choice of choices"> 
     <div class="form-group">   
      <select class="form-control" id="timeZonePicker"> 
       <option value="-12" >(GMT -12:00) Eniwetok, Kwajalein</option> 
       <option value="-11" >(GMT -11:00) Midway Island, Samoa</option> 
        ............ 
      </select> 
     </div> 
     <div class="form-group"> 
      <input type="time" class="form-control" id="startTimeInput"> 
     </div> 
     <div class="form-group"> 
      <input class="time" class="form-control" id="endTimeInput"> 
     </div> 
    </fieldset> 
</form> 
    <button class="pull-left btn btn-success" (click)="addNewItem()">Add Field</button> 
    <button class="pull-left btn btn-danger" (click)="removeItem()">Remove Field</button> 

다음은 구성 요소입니다.

export class TimeZonesComponent { 
constructor(){} 

choices = [{id: 1}, {id: 2}]; 

addNewChoice(){ 
    var newItemNo = this.choices.length + 1; 
    this.choices.push({'id': newItemNo}); 
} 

removeChoice(){ 
    var lastItem = this.choices.length - 1; 
    this.choices.splice(lastItem); 
}} 

저는 Angular.js 솔루션을 다양하게 시도했지만 여기에는 Angular2가 없습니다. 어떤 도움을 많이 주시면 감사하겠습니다!

Answer 1

addNewItem 및 removeItem과 같은 기능이 없습니다.

왜 방법은`addNewItem`와`removeItem`라고

<button class="pull-left btn btn-success" (click)="addNewChoice()">Add Field</button> 
    <button class="pull-left btn btn-danger" (click)="removeChoice()">Remove Field</button>