获取Angular中选择选项的值

Posted 2023-02-22

【中文标题】获取Angular中选择选项的值

【英文标题】：Get the value of a select option in Angular

【发布时间】：2020-03-23 17:28:56

【问题描述】：

我有这个 user.model.ts，我有一个用户列表，我可以通过单击过滤用户数据并将其放入引导模式的按钮进行编辑，选择标签中的 [ngModel] 我可以获取我的用户的国家，但是当我更改国家并提交表单时，我收到了当前的国家，但没有收到它的 ID，应该注意的是，当我在选项中使用 [value] 时，它不会显示当前的国家，如何我可以得到价值而不是名字吗？谢谢。

在 user.component.ts 中

updateUser(formActualizarTeam) 
  console.log(this.user);

在 user.model.ts 中

export class UserModel
 name: string;
 idCountry: number;

在 user.component.html 中

<form
  #formUpdate="ngForm"
  (ngSubmit)="updateUser(formUpdate)">

<select
   id="country"
   name="idCountry"
   class="form-control"
   [(ngModel)]="user.idCountry">
   <option *ngFor="let c of countries"> c.name </option>
</select>

</form>

【问题讨论】：

你能显示国家数组吗？，？

【参考方案1】：

您需要将 [value] 绑定到 idCountry ，还需要设置默认值，所选值应与某些选项值匹配：

<select
   id="country"
   name="idCountry"
   class="form-control"
   [(ngModel)]="user.idCountry">
   <option *ngFor="let c of countries" [value]="c?.idCountry"> c?.name </option>
</select>

另外加载默认值有两个选项：

component.ts

ngOnInit()
this.user['idCountry'] =  this.countries[0]['id']; //  set this after country data is loaded

或

this.user['idCountry'] = '';

component.html

<select
   id="country"
   name="idCountry"
   class="form-control"
   [(ngModel)]="user.idCountry">
   <option value="" [disabled]="true"> Select country</option> // set some placeholder
   <option *ngFor="let c of countries" [value]="c?.idCountry"> c?.name </option>
</select>

【讨论】：

当我在选项中使用 [value] 时，它不会显示当前国家/地区 :(

@CarlosMorales 您需要在加载数据时设置当前国家/地区，即：his.user['idCountry']

对不起，我是新手，您能详细说明一下吗？

嗨，我调试了我的应用程序并在我的用户数组中发现了一个严重错误，因为如果不是字符串，idcountry 没有返回数字，无论如何感谢你，我意识到了这个错误，非常感谢

【参考方案2】：

我认为您需要使用[value] 属性来匹配选项以选择ngModel

那么代码将是（如果您在 countries 数组中有 idCountry）

<select id="country" name="idCountry" class="form-control [(ngModel)]="user.idCountry">
   <option *ngFor='let c of countries' [value]='c.idCountry'> c.name </option>
</select>

【讨论】：

当我在选项中使用 [value] 或 [ngValue] 时，它不会显示当前国家/地区 :(

["idCountry":1,"name":"Polonia","idCountry":2,"name":"Malasia","idCountry":3,"name ":"Suecia"]...这是一项服务

这应该用上面的代码来完成，否则你的数组数据会不匹配。如果您需要更多帮助，请考虑显示完整的组件代码..

嘿，你好，我的用户数组中有一个严重错误，因为 idcountry 没有返回一个数字，如果不是一个字符串，无论如何感谢你我意识到这个错误，非常感谢你

【参考方案3】：

您可以通过使用（更改）事件来获取选定的值。

在您的 html 中：

<select (change)="onChange($event)"
   id="country"
   name="idCountry"
   class="form-control">
   <option *ngFor="let c of countries"> c.name </option>
</select>

在你的.ts:

onChange(e: any) 
    console.log(e.target.value);

【参考方案4】：

您必须为您的选项标签设置 [value]，如下所示 [value]="c.idCountry"

<form
  #formUpdate="ngForm"
  (ngSubmit)="updateUser(formUpdate)">

<select
   id="country"
   name="idCountry"
   class="form-control"
   [(ngModel)]="user.idCountry">
   <option *ngFor="let c of countries" [value]="c.idCountry"> c.name </option>
</select>

</form>

你会得到价值现在尝试打印它

updateUser(ngform)
    console.log(ngform.form.value)