Angular 4默認選擇的選項沒有ngModel

Question

我需要選擇'Month'作爲默認選項。我見過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，不要使用(change)，使用(ngModelChange)代替並設置爲默認值，不要使用value="..."而是將默認值分配給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>