将ngModel绑定到select控件的模型上
将ngModel绑定到select控件的模型上
这个问题已经在这里有答案了:
在 Angular 1.x 中，你可以将 ngModel 绑定到选择控件的模型上：
当选择一个选项时，selectedPerson 模型将指向用户选择的 person 模型。
在 Angular2 中有没有一种方法来实现同样的效果呢？
我试过以下方法但都没有成功：
我还尝试过：
在第一次尝试中，selectedPerson 模型引用的是 person.name 而不是 person 对象。而在第二次尝试中，它引用的是一个对象，它似乎不是一个 JSON 对象。
有没有什么不对的地方？这可不可行？
admin 更改状态以发布 2023年5月23日
我也遇到了同样的问题，试图将一个对象作为选定值传递给ngModel。我看到的另一种解决方案是将对象的字符串版本传递为字符串，但这非常肮脏。
最后，我决定在对象中创建一个单独的索引，将其传递给ngModel。我使用它来选择对象并执行操作。
还有讨论：https://github.com/angular/angular/issues/4843
和How to use select/option/NgFor on an array of objects in Angular2
您可以使用FormBuilder指令在表单中实现：
import { FormBuilder, Validators } from '@angular/forms';
export class LoginPage {
constructor(form: FormBuilder) {
this.cities = ["Shimla", "New Delhi", "New York"]; // List of cities
this.loginForm = form.group({
username: ["", Validators.required],
password: ["", Validators.required],
city: ["", Validators.required] // Setting the field to "required"
});
}
login(ev) {
console.log(this.loginForm.value); // {username: , password: , city: }
}
}
在您的.html文件中：