Angular form.controls ['InputName']。value更新问题

Question

我在使用以下示例更新表单值时遇到问题：

component.html

<form #testForm="ngForm">
    <select name="dropdown" [(ngModel)]="dropdown" (ngModelChange)="onDropdownChange($event)">
        <option value="0"></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

component.ts

export class TestComponent {
    @ViewChild('testForm') public form: NgForm;

    public dropdown: string;

    public onDropdownChange() {
        console.log("this.dropdown: " + this.dropdown);
        console.log("this.form.controls[dropdown].value: " + this.form.controls['dropdown'].value);
    }
}

页面加载时，下拉列表为空白。如果我选择“1”，则记录以下内容：

this.dropdown: 1

this.form.controls[dropdown].value: undefined

如果我然后选择“2”，则记录以下内容：

this.dropdown: 2

this.form.controls[dropdown].value: 1

我的问题是为什么会发生这种情况，我怎样才能使this.form.controls ['dropdown']。值具有最新值并且不是“落后”？

Answer 1

尝试将(ngModelChange)更改为(change)，如下所示：

<form #testForm="ngForm">
    <select name="dropdown" [(ngModel)]="dropdown" (change)="onDropdownChange($event)">
        <option value="0"></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

Answer 2

另一个选择是尝试一个简单的getter / setter。

模板

<form #testForm="ngForm">
    <select name="dropdown" [(ngModel)]="dropdown">
        <option value="0"></option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

请注意，它没有modelChange或change事件

零件

export class TestComponent {
    @ViewChild('testForm') public form: NgForm;

    private _dropdown;
    get dropdown(): string {
       return this._dropdown;
    }
    set dropdown(value: string) {
        this._dropdown = value;
        console.log("this.dropdown: " + this.dropdown);
        console.log("this.form.controls[dropdown].value: " + this.form.controls['dropdown'].value);
    }
}

每次下拉值更改时都会调用setter。