在 Angular 中完成订阅调用之前调用函数

Question

我正在从服务器获取数据，但在调用完成之前，该函数被调用返回一个空数组。我是 RxJs 的新手，任何人都可以帮助我

getRows: (params) => {
      setTimeout(() => {
        const dataAfterSortingAndFiltering = this.sortAndFilter(audits.docs, params.sortModel, params.filterModel);
        const rowsThisPage = dataAfterSortingAndFiltering.slice(0, audits.items.end);
        let lastRow = -1;
        if (dataAfterSortingAndFiltering.length <= params.endRow) {
          lastRow = dataAfterSortingAndFiltering.length;
        }
        params.successCallback(rowsThisPage, lastRow);
      }, 3000);

sortAndFilter 函数：

sortAndFilter(allOfTheData, sortModel, filterModel) {
  return this.sortData(sortModel, this.filterData(filterModel, allOfTheData));
}

filterData函数：

filterData(filterModel, data) {
  const filterKeys = Object.keys(filterModel);
  const filterPresent = filterModel && Object.keys(filterModel).length > 0;
  if (!filterPresent) {
    return data;
  }
  const resultOfFilter = [];
  const filterParams = [];
  for (let i = 0; i < filterKeys.length; i++) {
    filterParams.push(`${filterKeys[i]}=${filterModel[filterKeys[i]].filter}`);
  }
  const params = filterParams.join('&');

  this.auditService.getColumnSearch(params).pipe(first()).subscribe((datas: any) => {
    resultOfFilter.push(...datas.docs);
  });
  return resultOfFilter;
}

排序数据函数：

sortData(sortModel, data) {
console.log('sortModel got called', sortModel);
console.log('data', data);
const sortPresent = sortModel && sortModel.length > 0;
if (!sortPresent) {
  return data;
}
const resultOfSort = data.slice();
resultOfSort.sort((a, b) => {
  for (let k = 0; k < sortModel.length; k++) {
    const sortColModel = sortModel[k];
    const valueA = a[sortColModel.colId];
    const valueB = b[sortColModel.colId];
    if (valueA == valueB) {
      continue;
    }
    const sortDirection = sortColModel.sort === 'asc' ? 1 : -1;
    if (valueA > valueB) {
      return sortDirection;
    } else {
      return sortDirection * -1;
    }
  }
  return 0;
});
return resultOfSort;

}

在服务器调用完成之前，sortData 函数将数据返回为 []。

Answer 1

利用async 和await 的功能

export class AuditComp {

getRows(params) {
    setTimeout(() => {
        const dataAfterSortingAndFiltering = this.sortAndFilter(audits.docs, params.sortModel, params.filterModel);
        const rowsThisPage = dataAfterSortingAndFiltering.slice(0, audits.items.end);
        let lastRow = -1;
        if (dataAfterSortingAndFiltering.length <= params.endRow) {
            lastRow = dataAfterSortingAndFiltering.length;
        }
        params.successCallback(rowsThisPage, lastRow);
    }, 3000);
}

sortAndFilter(allOfTheData, sortModel, filterModel) {
    return this.sortData(sortModel, this.filterData(filterModel, allOfTheData));
}

sortData(sortModel, data) {
    console.log('sortModel got called', sortModel);
    console.log('data', data);
    const sortPresent = sortModel && sortModel.length > 0;
    if (!sortPresent) {
        return data;
    }
    const resultOfSort = data.slice();
    resultOfSort.sort((a, b) => {
        for (let k = 0; k < sortModel.length; k++) {
            const sortColModel = sortModel[k];
            const valueA = a[sortColModel.colId];
            const valueB = b[sortColModel.colId];
            if (valueA == valueB) {
                continue;
            }
            const sortDirection = sortColModel.sort === 'asc' ? 1 : -1;
            if (valueA > valueB) {
                return sortDirection;
            } else {
                return sortDirection * -1;
            }
        }
        return 0;
    });
    return resultOfSort;
}

async filterData(filterModel, data) {
    const filterKeys = Object.keys(filterModel);
    const filterPresent = filterModel && Object.keys(filterModel).length > 0;
    if (!filterPresent) {
        return data;
    }
    const resultOfFilter = [];
    const filterParams = [];
    for (let i = 0; i < filterKeys.length; i++) {
        filterParams.push(`${filterKeys[i]}=${filterModel[filterKeys[i]].filter}`);
    }
    const params = filterParams.join('&');

    await this.auditService.getColumnSearch(params).pipe(first()).toPromise()
    .then((datas: any) => {
        resultOfFilter.push(...datas.docs);
    });
    return resultOfFilter;
 }
}

如果遇到任何问题，请发表评论。