Angular：常见问题集锦(3)

1、调用接口的时候怎么带着查询条件？

例如：调用接口查询数据，并带有条件，只查询状态码为"2"的数据：

可以将查询条件放在调用接口的方法的传入参数searchCondition中：

调用接口查询的方法：

/**
   * 查询列表(分页)
   * @param pageIndex
   * @param pageSize
   * @param sortKey
   * @param sortValue
   * @param searchCondition
   */
  public getDataPageList(
    pageIndex: number = 1,
    pageSize: number = 10,
    sortKey: string,
    sortValue: string,
    searchCondition?: any          // 可以将查询条件传入searchCondition中
  ): Observable<any> {
    return new Observable(obs$ => {
      const params = {
        current: pageIndex,
        pageSize: pageSize
      };
      if (sortKey !== null) {
        params['orderByField'] = sortKey;
        params['isAsc'] = sortValue;
      }
      for (const key in searchCondition) {
        if (searchCondition.hasOwnProperty(key)) {
          const value = searchCondition[key];
          if (!helper.IsEmpty(value)) {
            params[key] = value;
          }
        }
      }

      this.httpRequest.getRequest(this.api_List, params, {}).subscribe(
        res => {
          if (_.isObject(res)) {
            if (res['status'] === 0) {
              obs$.next(res['data']);
            } else {
              this.notice.error(res['message']);
              obs$.next([]);
            }
          }
        },
        err => {
          obs$.error(err);
        }
      );
    });
  }

在页面组件上调用这个接口时传入查询条件：

/**
* 查询数据
*/
  searchData(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }
    this.loading = true;
    this.searchForm.value['bStatus'] = '2';        // 只显示状态为2的记录
    this.ApprovalProvider.getDataPageList(this.pageIndex, this.pageSize, this.sortKey,
      this.sortValue, this.searchForm.value).subscribe(data => {
          if (!helpers.IsEmpty(data)) {
            this.total = data['total'];
            this.dataSet = data['records'];
          }
          this.loading = false;
      }, err => {
        this.notice.error('数据加载失败！');
        this.loading = false;
      });
  }

2、多选列表中几条记录进行操作时，想要把几条记录的id用逗号拼接成ids对象：

首先在组件的方法中，将所选记录的value传到provider的调接口的方法中：

 /**
   * 选择数据操作
   *   更新和删除
   * @param type
   */
  operateData(type) {
    const checkedDataSet = this.dataSet.filter(value => value.checked);      
      // 所选若干记录的value

    switch (type) {
      case 'delete':  //  删除:是否需要验证状态，状态为什么可以删除:既定设为1
        if (!this.validateStatus(checkedDataSet, '1')) {
          this.notice.error('请选择状态为待确认的记录进行作废！');
        } else {
          this.modalService.confirm({
            nzTitle: '系统提示',
            nzContent: '您确认删除选中的记录吗？',
            nzOnOk: () => new Promise((resolve, reject) => {
              this.MesManagementProvider.doDelete(checkedDataSet).subscribe(res => {
                if (res) {
                  this.notice.success('删除成功');
                  this.searchData();
                }
                resolve(true);
              });
            }).catch(() => { })
          });
          break;
        }
    }
  }

然后在MesManagementProvider服务的doDelete方法中，将所选对象的id拼接成ids：

/**
   * 删除数据
   * 支持批量删除
   *
   * @param data
   */
  doDelete(data: any): Observable<any> {
    return new Observable(observable$ => {
      const api_url = data.length === 1 ? this.api_Del : this.api_Delete;
      const ids = this.getDeleteIds(data);
      this.httpRequest.deleteRequest(api_url, ids, {}).subscribe(
        res => {
          if (res && res['status'] === 0) {
            observable$.next(true);
          } else {
            observable$.next(false);
            this.notice.error('删除失败,原因【' + res['message'] + '】');
          }
        },
        err => {
          observable$.error(err);
        }
      );
    });
  }

其中ids在getDeleteIds方法中进行拼接：

public getDeleteIds(data) {       // data中的内容是从组件传过来的被选择的几条数据的值
    let params = '';
    data.forEach(item => {
      params += ',' + item.id;    // 拼接数据的id
    });
    params = params ? params.substring(1) : '';
    return data.length > 1 ? { ids: params } : { id: params };
  }

3、下拉选项为多选时，单独存一张表，表结构为[{value:...},{value:...}...]

表单中的其他字段正常存储在saveData中，将多选的字段单独拉出来处理：

例如production（生产工艺字段）处理后，拼接到saveData中：

const productionList = this.basicInfo.vendorDetailBasicVO.value.production;      // vendorDetailBasicVO是字段所在的表单名
const production = [];
productionList.forEach(item =>{
    const value={
      value: item
  };
 production.push(value);    // 字段拼接
});
saveData['production'] = production;     // 将组装好的production字段存到表单中
return saveData;

相应的，读取数据的时候，怎么把value从对象中取出来呢？

可以用forEach方法遍历这个对象：

const productionList = [];
if(!helpers.IsEmpty(data.production)){
  data.production.forEach(item =>{
     productionList.push(item.value);
  });
}
this.vendorDetailBasicVO.control['production'].setValue(productionList);    
// 将组装好的productionList传给表单的production

4、列表行可编辑的时候，日期字段的格式转化：

开始编辑列表的某一行的时候，要将日期编辑框重新定义一个新的字段，将原字段修改成一个新的Date类型的日期对象。

/**
   * 开始编辑
   * @param index
   */
  startEdit(index: number): void {
    if (this.dataSet[index].status === '1' || this.dataSet[index].status === '3' ||  
      this.dataSet[index].status === '5') {      // 只可编辑状态码为1、3、5的记录
      this.isAdd = false;
      this.editCache[index].data._beginDate = 
                 new Date(this.editCache[index].data.beginDate);
      this.editCache[index].data._endDate = 
                 new Date(this.editCache[index].data.endDate);
      this.editCache[index].edit = true;
    } else {
      this.notice.error('请选择状态为待确认或已拒绝的记录进行修改！');
    }
  }

在doSave方法中，由于列表要求存的日期格式是YYYY:MM:dd HH:mm:ss，所以后面组装上00:00:00后，在赋值给原字段

doSave(saveData, index) {
    if (helpers.IsEmpty(saveData._beginDate)) {
      this.notice.warning('生效日期不能为空');
      this.editCache[index].edit = true;
      return false;
    }
    if (helpers.IsEmpty(saveData.endDate)) {
      this.notice.warning('截止日期不能为空');
      this.editCache[index].edit = true;
      return false;
    }
    
    saveData.beginDate = this.dateUtil.formatDate(saveData._beginDate) + ' 00:00:00';
    saveData.endDate = this.dateUtil.formatDate(saveData._endDate) + ' 00:00:00';
    this.ManagementAddProvider.doSave(saveData, this.isAdd).subscribe(res => {
      if (res) {
        this.notice.success('保存成功！');
        this.searchData();
      }
    });
}

5、将取出的result中的id组装成一个数组userIds：

modal.afterClose.subscribe((result) =>{
  const userIds = [];
  result.data.forEach(item =>{
        userIds.push(item.id);
   });
 ......
})