Question

...
  <select class="form-control" (change)="onChange($event.target.value, 'status')" #byStatus>
    <option value ="" disabled selected="selected">IBy Status</option>
    <option>Pending</option>
    <option>Paid</option>
  </select>
</div>
<div class="col-xs-2">
  <select class="form-control" (change)="onChange($event.target.value, 'user')" #byUser>
    <option value ="" disabled selected="selected">By User</option>
    <option *ngFor="let user of allUsers" value="{{user.id}}">{{user.first_name}}  - {{user.email}}</option>
  </select>
...

在.ts文件中，我知道选择了哪个选择输入。我尝试使用nativeElement更改购买的价值，但

this.byStatus.nativeElement.ElementRef

为空。

如果选择另一个，如何将选择输入的值设置为默认值。因此，如果选择输入1st被选择为2nd，则应将其设置为默认值；如果选择2nd，则应将1为默认值。

onChange(selectedVal: string, by: string) {
  if (by === 'status') {
    ...
  } else if (by === 'user') {
    console.log(this.byStatus.nativeElement.ElementRef);
    this.byStatus.nativeElement.ElementRef.value = "";
  }
}

Answer 1

而不是使用nativeElement来更改元素，请尝试使用Angular提供的模板驱动的表单（ngModel）（请参阅文档：https://angular.io/guide/forms）。您还可以使用反应性表单（请参阅文档：https://angular.io/guide/reactive-forms）。这两种方法都可以使您更好地控制代码。

要在代码中使用ngModel。您需要将FormsModule中的app.module.ts导入

app.modules.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
  ],
  declarations: [
    ...
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule {}

在HTML中，将ngModel属性设置为select标签，以将值绑定到组件。这样，当您从status下拉菜单中选择一项时，它将把selectedStatus更新为所选选项的值。

<select class="form-control" (change)="onChange('status')" [(ngModel)]="selectedStatus">
  <option value="" disabled selected="selected">IBy Status</option>
  <option>Pending</option>
  <option>Paid</option>
</select>
<select class="form-control" (change)="onChange('user')" [(ngModel)]="selectedUser">
  <option value="" disabled selected="selected">By User</option>
  <option *ngFor="let user of allUsers" value="{{user.id}}">{{user.first_name}}  - {{user.email}}</option>
</select>

然后在您的组件中，声明必需的并将其设置为默认值。

  selectedUser: any = "";
  selectedStatus: any = "";

  onChange(changedDropdown: string) {
    if (changedDropdown === 'user') {
      this.selectedStatus = "";
    } else {
      this.selectedUser = "";
    }
  }

这是Stackblitz上的相同示例

当以角度选择另一个选择输入时，如何重置一个选择输入的值

1 个答案: