如何在Angular中设置下拉值答案

【问题标题】：How to set drop-down value in Angular如何在Angular中设置下拉值
【发布时间】：2020-02-06 23:59:02
【问题描述】：

我有一个下拉菜单，我想在其中使用 TS 文件中的一些逻辑设置一个值。这是我的下拉菜单的样子：

 <select [(ngModel)]="selectedEntity" (change)="onChange();">
     <option *ngFor="let item of Entities" [ngValue]="item.EntityID">{{item.EntityName}}</option>
 </select>

在更改时，我想检查一个条件，然后根据该条件设置一个值。但是，我被卡住了，因为我似乎无法在视图中更新下拉值。我尝试将selectedEntity 设置为新值，但没有成功。如何使用 TS 文件设置选定的值？

编辑：为了更清楚起见，我基本上是在尝试确认 Entities 数组中的当前项目是否允许选择的选项。如果允许，则选择用户选择的选项，否则，将其重置为之前的值。

【问题讨论】：

你能做一个stackblitz吗https://stackblitz.com/
试试[ngValue]="item"。
@KiranMistry 这是一个堆栈闪电战：stackblitz.com/edit/angular-hufmqo

标签： angular

【解决方案1】：

试试这个我的朋友，ngModelChange 是要走的路。您可以连接到 event.value 以访问您的值

 <select [(ngModel)]="selectedEntity" (ngModelChange)="onChange($event)">
 <option *ngFor="let item of Entities" [ngValue]="item.EntityID">{{item.EntityName}}</option>

我对 stackblitz 进行了一些更改。在事件中，您可以挂钩该值并使用它

    onChange(event) {   if (event.id==1){
console.log("Value 1");
}
else if(event.id==2){
console.log("Value 2");
}
 else if(event.id==3){
console.log("Value 3");
}else{
  console.log("Update to Value 1");
} }

【讨论】：

等选择的 id 你可以执行你想要的任何逻辑，让我知道它是否适合你

【解决方案2】：

event handler registered in ngModelChange will be fired before the value of model changes。您必须使用更改的事件处理程序传递事件。你可以试试

   (change)="onChange($event);"

代码

    <select [(ngModel)]="selectedEntity" (change)="onChange($event);">
       <option *ngFor="let food of foods" [ngValue]="food.name">{{food.name}}</option>
     </select>

TS 文件

    onChange(event:any){
        console.log(this.selectedEntity)
    }

【讨论】：