2017-11-17 20 views
1

私は、追加ボタンで選択ドロップダウンを動的に作成するフォームを用意しています。すぐに私は、[追加]ボタンをクリックし、前のドロップダウンで変更した値はに戻り、角度2のオプションを選択すると、オプションの選択時に適切な値が表示されない

increaseWeeklyEvent() { 
    this.createWeekEvent(); 
} 

createWeekEvent() { 
     var newEvent = new TimeSchedule(); 
     var arrNewEvent = new Array<TimeSchedule>(); 

     if (this.scheduleStatus != null && this.scheduleStatus != undefined && this.scheduleStatus.length > 0) 
     { 
      newEvent.Time = "08:00"; 
      newEvent.enumvalue = this.scheduleStatus[0].EnumId; 
      newEvent.Status = this.scheduleStatus[0].EnumString; 

      this.tmpWeeklyEvent.push(newEvent); 
     } 
     else 
     { 
      this.toastr.error("No data found for Schedule Status Dropdown. Add/Edit will not work"); 
     } 
    } 

私の問題がある:ちょうどリストに別のイベントが追加されます

<div *ngFor="let event of tmpWeeklyEvent;let index=index" class="col-xs-12 padding-left-right-0 clearfix"> 
    <select title="Select Country" class="form-control margin-top-5" [disabled]="scheduleStatus==null || scheduleStatus==undefined" [(ngModel)]="event.enumvalue" name="eventStatus"> 
     <option *ngFor="let item of scheduleStatus" value="{{item.EnumId}}">{{item.EnumString}} 
     </option> 
    </select> 
</div> 
<button type="button" class="btn btn-primary" (click)="increaseWeeklyEvent()">Add New Event</button> 

IncreaseWeeklyEvent():次は私のHTMLコードスニペットですデフォルト値。しかし、モデルでは、変更された値が保持され、HTMLでも、正しい値がselectタグにバインドされていることがわかります。したがって、selectタグは他の文字列を表示しますが、ドロップダウンの選択に従って正しい値にバインドします。

オプションタグの値を[value][ngValue]に置き換えようとしましたが、同じ問題が引き続き発生します。

どこが間違っているのかを教えてください。

+0

plunker/stackblitzで問題を再現してください。私はその質問を理解しているのか分からない。テンプレートが正しい値を示していますか? – Alex

答えて

0

これはフォームであると仮定します。フォームでは、name属性が一意である必要があるため、フィールドは個別フィールドではなく同一フィールドとして評価されます。これはフォームであれば、フォームの値は、それら1と同じフィールドへのすべてのポイント、現在

どんなにあなたが持っているどのように多くの分野
{ 
    "eventStatus": 1, 
} 

のように見えます。一方、あなたの配列には正しい値があることに気づいています。これはフォームにのみ影響します。あなたは、インデックスを使用して達成することができるユニークなnameを、選択与えることによってこの問題を解決するため、にあなたの選択を変更することができます。

<div *ngFor="let event of tmpWeeklyEvent; let index=index"> 
    <select [(ngModel)]="event.enumvalue" name="eventStatus{{index}}"> 
    <!-- ... --> 

、それはあなたの問題を解決する必要があります。

+0

ありがとう、それは働いた! – supernova

+0

すばらしい、聞いてうれしい! :) :) – Alex

関連する問題