Question

我需要选择＆＃39;月＆＃39;作为默认值。我已经看到了在ngFor列表中使用ngModel的示例，但它在我的情况下不起作用。有人知道解决方案吗？

模板：

 <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可能更好[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>

Answer 2

我在角度10中按以下方式解决了这个问题。

file-98.csv

和组件

file-83.csv

没有ngModel的Angular 4默认选择选项

2 个答案: