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这样的函数。

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