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>