Javascript 单击可获取多个值

我有这样一个下拉列表，它包含

输入，还有两个下拉列表

我想知道当我单击搜索按钮时，如何获得这3个值

截图

代码

HTML

<nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="card search-box p-2">
      <div class="mb-2">
        <label for="">Search By {{ column.name }}</label> <br>
        <input nz-input placeholder="Type here..." />
      </div>

      <div class="mb-2">
        <label for="sort">Sort Order</label> <br>
        <nz-select ngModel="none" class="text-left mr-2" style="width:100%;">
            <nz-option nzValue="none" nzLabel="None"></nz-option>
            <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
            <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
        </nz-select>
      </div>

      <div class="mb-2">
        <label for="op">Filter Column</label> <br>
        <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;">
            <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
            <nz-option nzValue="like" nzLabel="Like"></nz-option>
        </nz-select>
      </div>
      <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
    </div>
</nz-dropdown-menu>

---

使用

ReactiveForms

。您可以根据需要获取表单值

使用

反应式表单模块

获取表单数据：-

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule ,ErrorHandler } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
declarations: [],
imports: [ FormsModule,ReactiveFormsModule]});

export class AppModule { }

组件。TS

import { Component,OnInit } from '@angular/core';
import {FormGroup,FormControl,Validators,FormArray} from '@angular/forms';
import {Observable} from 'rxjs/Observable';
.
.
.
public formName: FormGroup;
constructor(private formsModule: FormsModule) {
 this.formName =  this.formBuilder.group({
   firstName:  [null, Validators.required],
   lastName:  [null, Validators.required],
 })
} 

 onSubmit() {
   console.log(this.formName.value);
 }

COMPONENT.HTML

<form [formGroup]="formName" (ngSubmit)="onSubmit()">
   <div>
     <input type="number" formControlName="firstName">
   </div>
   <div>
     <input type="number" formControlName="lastName">
   </div>
  <button class="btn btn-primary" type="submit">Submit</button> 
</form>

希望它将为所有人用户满

You can use form controls provided by Angular.
like this
----------


 <nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="card search-box p-2">
      <div class="mb-2">
        <label for="">Search By {{ column.name }}</label> <br>
        <input nz-input placeholder="Type here..." formControl="searchControl"/>
      </div>

      <div class="mb-2">
        <label for="sort">Sort Order</label> <br>
        <nz-select ngModel="none" class="text-left mr-2" style="width:100%;" formControl="orderControl">
            <nz-option nzValue="none" nzLabel="None"></nz-option>
            <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
            <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
        </nz-select>
      </div>

      <div class="mb-2">
        <label for="op">Filter Column</label> <br>
        <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;" formControl="filterControl">
            <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
            <nz-option nzValue="like" nzLabel="Like"></nz-option>
        </nz-select>
      </div>
      <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
    </div>
</nz-dropdown-menu>

---

或者您可以使用ngModel或表单组…等等

---

{firstName : ... , lastName : ...}

You can use form controls provided by Angular.
like this
----------


 <nz-dropdown-menu #menu="nzDropdownMenu">
    <div class="card search-box p-2">
      <div class="mb-2">
        <label for="">Search By {{ column.name }}</label> <br>
        <input nz-input placeholder="Type here..." formControl="searchControl"/>
      </div>

      <div class="mb-2">
        <label for="sort">Sort Order</label> <br>
        <nz-select ngModel="none" class="text-left mr-2" style="width:100%;" formControl="orderControl">
            <nz-option nzValue="none" nzLabel="None"></nz-option>
            <nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
            <nz-option nzValue="desc" nzLabel="Descending"></nz-option>
        </nz-select>
      </div>

      <div class="mb-2">
        <label for="op">Filter Column</label> <br>
        <nz-select ngModel="contains" class="text-left mr-2" style="width:100%;" formControl="filterControl">
            <nz-option nzValue="contains" nzLabel="Contains"></nz-option>
            <nz-option nzValue="like" nzLabel="Like"></nz-option>
        </nz-select>
      </div>
      <button type="button" class="btn btn-warning w-100 mt-2" (click)="search()"><i class="fe fe-search"></i> Search</button>
    </div>
</nz-dropdown-menu>

import { Component,OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
.
.
.
constructor() {} 
searchControl: FormControl = new FormControl();
filterControl: FormControl = new FormControl();
orderControl: FormControl = new FormControl();

 search() {
    console.log(searchControl.value);
 }