首页 > 解决方案 > 在第一个结果中获取下拉列表的返回值 [object Object]。当我选择一个选项并工作时,它会改变。如何修复默认结果

问题描述

我有一个 Angular 7 应用程序。我已经调用服务来获取 mysql 数据。在一个表单中,我想填充一个下拉列表并想要验证它。但是下拉列表一开始总是有一个未定义的值,所以我不能用必需的来验证它。为什么它一开始有一个[object Object]?但是当我正确选择一个值时它会起作用。

我已经在一个组件中使用它并且使用下面的代码效果很好

Component.ts file

this.employeeservice.retrieveAllTodos().subscribe(
  response => {
    this.employeesList = response;
    console.log("it works");
  }
);
<select class="custom-select custom-select-sm" [class.ng-invalid]="!ecode.value" name="ecode" #ecode="ngModel" required [ngModel]="ecode" (ngModelChange)="getId($event,ecode.value)">

  <option *ngFor="let todo of employeesList" value={{todo.employeeCode}}>{{todo.employeeCode}} - {{todo.employeeName}}</option>

</select>
<div *ngIf="ecode.errors && (ecode.dirty || ecode.touched || todoForm1.submitted)">

  <div *ngIf="ecode.errors.required">
    <small class="form-text text-muted">Please select code</small>
  </div>
  <div *ngIf="ecode.invalid">
    <small class="form-text text-muted">Please select code1</small>
  </div>


</div>

<pre> {{ecode.value}}</pre>
<pre *ngIf="ecode.value === null">no value</pre>

https://imgur.com/OjSF2Wv https://imgur.com/JY7zhYD

我已经包含了 2 张我的情况的图片

标签: javascriptarraysangularapiobject

解决方案


问题在于这"[ngModel]="ecode""看起来像 ecode 是一个对象

将其更改为 ."[ngModel]="ecode.value""它应该可以工作


推荐阅读