角4デフォルトで選択されたngModelなしのオプション

Question

デフォルトでは、[月]オプションが必要です。私はngModelがngForリストで使用されている例を見てきましたが、私の場合はうまくいきません。誰もが解決策を知っていますか？

テンプレート：

<select class="form-control" (change)="onAmountChanged(tippanel)" [(ngModel)]="tip.Period"> 
           <option value="FourWeeks">Per 4 weken</option> 
           <option [selected]="period == 'Month'" value="Month">Per maand</option> 
           <option value="Quarter">Per kwartaal</option> 
           <option value="Year">Per jaar</option> 
          </select> 

コンポーネント：

onAmountChanged(tippanel: GeldzorgenTipGroup) { 

    let total = 0; 
    for (var tip of tippanel.Tips) { 
     if (tip.InputValue > 0) { 
      if (tip.Period) 
      { 
       total += this.getValuePerMonth(tip.Period, tip.InputValue); 
      } else { 
       total += tip.InputValue; 
      } 
     } 
     console.log(tip.Period); 
    } 

    tippanel.tipTotal = total; 

    this.onInputChange.emit(true); 
} 

getValuePerMonth(period: string, value: number): number { 
    switch (period) 
    { 
     case "FourWeeks": return (value * 13)/12; 
     case "Quarter": return value/3; 
     case "Year": return value/12; 
     default: 
     case "Month": return value; 
    } 
} 

Answer 1

あなたがngModelを使用している場合は、value="..."を使用しない、代わりに(ngModelChange)を使用して、デフォルト値を設定するには、(change)を使用していません代わりにデフォルト値をtip.Periodに割り当てるか、モデルを[(ngModel)]="..."にバインドするかを指定します（または、ngModelChange pro bably良く[ngModel]="..."

class MyComponent { 
    selected:string = 'Month'; 

    onAmountChanged(tippanel) { 
    tip.Period = tippanel; 
    ... 
    } 

<select class="form-control" (ngModelChange)="onAmountChanged($event)" [ngModel]="selected"> 
    <option value="FourWeeks">Per 4 weken</option> 
    <option value="Month">Per maand</option> 
    <option value="Quarter">Per kwartaal</option> 
    <option value="Year">Per jaar</option> 
</select>