angular实现查询功能

接口获取

  accountList(accout: Accounts) {
    return this.dataService.post(`/api/list/accounts?${!accout.code ? '' : `code=${accout.code}`}${!accout.orgName ? '' : `orgName=${accout.orgName}`}&pageNum=${accout.pageNum}&pageSize=${accout.pageSize}${!accout.roleName ? '' : `&roleName=${accout.roleName}`}`).pipe(map(data => {
      return data.data;
    }));
  }

页面放搜索框

 <nz-input-group class="mr-3" nzSearch [nzAddOnAfter]="roleButton">
      <input type="text" nz-input [(ngModel)]="account.orgName"
             (keyup)="$event.code=='Enter'?getAccountList():0"
             placeholder="请输入查询账户、组织、角色"/>
      <ng-template #roleButton>
        <button nz-button nzType="primary" nzSearch
                (click)="getAccountList()"
        ><i nz-icon nzType="search"></i>搜索
        </button>
      </ng-template>
    </nz-input-group>

如图