如何在角度选择中获取选项的值？答案

【问题标题】：how to get the value of option in angular select?如何在角度选择中获取选项的值？
【发布时间】：2020-12-25 08:53:09
【问题描述】：

我试图在select 标记中获取ngvalue 的值。我正在使用角度模板驱动的表单，这就是我的全部代码：

<form #loginForm="ngForm"
  (ngSubmit)=logIn(field_fiscalYear.value)>
  <div class="container-fluid"
    id="authentication-wrapper">
    <div id="welcome-message">
      <h4>برای ادامه وارد شوید</h4>
    </div>
    <div id="wrap">
      <img src="../myPic"
        alt="profile picture">
    </div>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12">
        <kendo-textbox-container floatingLabel="نام کاربری">
          <input kendoTextBox
            type="text"
            name="userName"
            required
            [(ngModel)]="loginInfo.userName" />
        </kendo-textbox-container>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12">
        <kendo-textbox-container floatingLabel="کلمه عبور">
          <input kendoTextBox
            type="password"
            name="passWord"
            required
            [(ngModel)]="loginInfo.password" />
        </kendo-textbox-container>
      </div>

      <div class="col-xs-12 col-sm-12 col-md-12 mt-4">
        <select #field_fiscalYear
          class="form-control"
          required
          name="fiscalYear">
          <option [ngValue]="fiscalYear?.fiscalYearID"
            *ngFor="let fiscalYear of fiscalYears; trackBy: trackFiscalYearById;">{{fiscalYear.fiscalYearName}}</option>
        </select>

      </div>
      <div class="col-xs-12 col-sm-12 col-md-12">
        <button class="submit-btn btn btn-success"
          [disabled]="!loginForm.valid"
          type="submit"> ورود </button>
      </div>
    </div>
  </div>
</form>

我想得到[ngValue]="fiscalYear?.fiscalYearID"这一行的值，它的类型是Guid，所以我在提交方法中传递了这个：(ngSubmit)=logIn(field_fiscalYear.value)但我不明白为什么我得到fiscalYear.fiscalYearName而不是@ 987654328@！这是我的类型脚本：

export class AuthComponent implements OnInit {
  loginInfo: any = {};
  fiscalYears: IFiscalYear[];

  constructor(
    private authservic: AuthService,
    private alertify: AlertifyService
  ) { }

  ngOnInit(): void {
    this.authservic.getFiscalYears().subscribe(res => {
      this.fiscalYears = res;
      debugger;
    }, error => this.alertify.error(error));
  }

  // tslint:disable-next-line: typedef
  trackFiscalYearById(index: number, item: IFiscalYear) {
    return item.fiscalYearID;
  }

  logIn(fiscalYearID) {
    debugger;
    console.log(fiscalYearID);
    loginInfo.fiscalYearID = fiscalYearID;
  }

}

我想知道我在select 标签中做错了什么。

【问题讨论】：

标签： jquery css angular typescript

【解决方案1】：

考虑将以下更改应用于您的代码：

模板：

<select [(ngModel)]="loginInfo.fiscalYearID" ... >
  <option [value]="fiscalYear?.fiscalYearID"  ... ></option>
</select>

按照上面的方式实现后，选中的值会存储在loginInfo.fiscalYearID里面

【讨论】：