如何在角度5中获得所选选项的值 [英] How do you get the value of the selected option in angular 5

问题描述

VS2017使用.Net Core 2和Angular 5模板。



如何获得所选下拉选项的值。



打字稿文件如下所示：

从'@ angular / core'导入{Component} ; 
 
 @Component（{
 selector：'app-sku-registration-component'，
 templateUrl：'。/ sku-registration.component.html'
} ）
导出类SkuRegistrationComponent {
 
 catalogs = [
 {catalogname：Macy's，catalogcode：100}，
 {catalogname：Sears，catalogcode ：200}，
 {catalogname：JCPenny，目录代码：300}，
 {catalogname：LL Bean，目录代码：B5000} 
]; 
 
} 

和这样的html文件：

 <   div     class   =  container  >  
 <  表格   ＃skuRegistrationForm   =  ngForm >  
 
 <   div     class   =  form-group >  
 <   label     for   =  power > 目录<   / label   >  
 <  选择    class   =  form-control     id   = < span class =code-keyword> catalog  
   
                               required   
   
        < span class =code-attribute>                       [（ngModel）]   = 目录    name   =  catalogselector >  
 <  选项   < span class =code-attribute> * ngFor   = 让cat of catalogs    [ngValue]   =  cat >  {{cat.catalogname +（+ cat.catalogcode +）}} <   / option  >  
 <   / select  >  
 <   / div  >  
 <   div  > 所选目录代码：{{cat.catalogcode}} <   / div  >  
 <  按钮   （点击）  =   incrementmentsku-registration（） >  SUBMIT <   / button  >  
 <   / form  >  
 <   / div  >  

我无法获得以下行来显示所选目录代码：< br $>

< div>所选目录代码：{{cat.catalogcode}}< / div> 

我需要获取目录代码，以便我可以使用它来过滤依赖的下拉菜单。



我尝试了什么：



我尝试将[ngValue]更改为[value]



我尝试了以下几种变体：



{{cat.catalogcode}}

{{目录}}

{{目录？.catalogcode}}

{{catalogcode}}

解决方案

它应该是这样的，

< select [（ngModel）] =selectedname =statusplaceholder =select（ngModelChange）=onOptionsSelected（）> 
< option * ngFor =let catalog of catalogs[ngValue] =catalog> {{catalog.catalogname +（+ catalog.catalogcode +）}}< / option> 
< / select> 
< div> 
< div>所选目录代码：{{selected.catalogcode}}< / div> 
< / div> 

https://stackblitz.com/edit/angular -select-示例-ngfor-nnarvg？文件= SRC /应用/ app.component.html

VS2017 using the .Net Core 2 with Angular 5 template.

How do you get the value for the selected drop-down option.

Typescript file looks like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-sku-registration-component',
  templateUrl: './sku-registration.component.html'
})
export class SkuRegistrationComponent {

  catalogs = [
    { catalogname: "Macy's", catalogcode: "100" },
    { catalogname: "Sears", catalogcode: "200" },
    { catalogname: "JCPenny", catalogcode: "300" },
    { catalogname: "LL Bean", catalogcode: "B5000" }
  ];

}

and the html file like this:

<div class="container">
  <form #skuRegistrationForm="ngForm">
    
    <div class="form-group">
      <label for="power">Catalog</label>
      <select class="form-control" id="catalog"

              required

              [(ngModel)]="catalogs" name="catalogselector">
        <option *ngFor="let cat of catalogs" [ngValue]="cat">{{cat.catalogname + "(" + cat.catalogcode + ")"}}</option>
      </select>
    </div>
    <div>Selected catalog code: {{cat.catalogcode}}</div>
    <button (click)="incrementsku-registration()">SUBMIT</button>
  </form>
</div>

I can't get the following line to display the selected catalog code:

<div>Selected catalog code: {{cat.catalogcode}}</div>

I need to get the catalog code so I can use it to filter a dependent drop-down.

What I have tried:

I've tried changing [ngValue] to [value]

and I've tried several variations of the following:

{{cat.catalogcode}}
{{catalogs}}
{{catalogs?.catalogcode}}
{{catalogcode}}

解决方案

It should look like this,

<select [(ngModel)]="selected" name="status" placeholder="select" (ngModelChange)="onOptionsSelected()">
        <option *ngFor="let catalog of catalogs" [ngValue]="catalog">{{catalog.catalogname + "(" + catalog.catalogcode + ")"}}</option>
    </select>
<div>
<div>Selected catalog code: {{selected.catalogcode}}</div>
</div>

https://stackblitz.com/edit/angular-select-example-ngfor-nnarvg?file=src/app/app.component.html

这篇关于如何在角度5中获得所选选项的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！