map() 函数在 Angular 6 中为响应抛出空错误

Question

我正在尝试在 Angular 6 应用程序中实现 Angular 2 代码，以下是我正在尝试实现的代码。

https://www.c-sharpcorner.com/article/server-side-paging-in-kendo-grid-for-angular-2/

在下面的代码中，json

出现空错误

private getEmployee(state: any): Observable<GridDataResult>{  
    let params = new URLSearchParams();  
    params.set('Skip', state.skip);  
    params.set('Take', state.take)  
    return this.http  
        .get(this.BASE_URL, { search: params })  
        .map(response => response.json())  
        .map(response => (<GridDataResult>{  
            data: response.EmployeeList,  
            total: response.Count  
        }));  
      
}

当我运行应用程序

时出现如下错误

你能告诉我为什么会抛出这两个错误吗

这里是上面代码片段的订阅。

public query(state): void {  
    this.getEmployee(state)  
        .subscribe(x =>super.next(x));  
}

在C#代码中，我是return下面的data和total...

if (resultList.Count > 0)
{
    var result = new
    {
        data = resultList.ToArray(),
        total= resultList[0].TotalRecords
    };
    var jsonData = JsonConvert.SerializeObject(result);
    return jsonData;
}

当我按照你的建议实施时出现以下错误@StepUp

编辑

它无法识别我们从答案中提到的dataJson 获得的数据，因为它是一个常量。我们是否需要在 Angular 端创建映射 class？

Answer 1

我更习惯 Promises，所以这是我使用 Promises 的实现方式：

private async getEmployee(state: any): Promise<GridDataResult> {  
  let params = new URLSearchParams();  
  params.set('Skip', state.skip);  
  params.set('Take', state.take);
  const dataJson = await this.http.get(this.BASE_URL, { search: params }).toPromise();

  // Don't forget to check if dataJson is null, otherwise dataJson.EmployeeList will throw
  // EDIT
  const dataGridResult: GridDataResult = {
        data: dataJson.EmployeeList,  
        total: dataJson.Count  
  }

  return dataGridResult;
  
 }   

public async query(state): Promise<void> {  
    const dataGridResult:GridDataResult = await this.getEmployee(state);  
    super.next(dataGridResult);
}

编辑

我添加了一个类型 <{ EmployeeList: any[], Count: any}>，其属性类型为 any。如果可能，用更精确的东西替换它。

const dataJson = <{ EmployeeList: any[], Count: any}> await this.http.get(this.BASE_URL, { search: params }).toPromise();

Answer 2

不需要调用.json方法。此外，还可以使用 pipe 方法来组合运算符。代码可能如下所示：

return this.http  
    .get(this.BASE_URL, { search: params })      
        pipe(
            map(response => (<GridDataResult>{  
               data: response.EmployeeList,  
               total: response.Count  
            })), catchError( error => {
            return throwError( 'Something went wrong!' )
       });
    )

如果你想从数组中取出map项，那么需要调用数组的map方法：

mapToPerson(): Observable<Address[]> {
    this.getPersons
        .pipe(
            map((persons: Person[]) => persons.map(person => 
               person.address)))
        )
}

更新：

有必要理解为什么会报错。所以我们调试并找到问题。让我们尝试简化您的代码：

private getEmployee(state: any): Observable<GridDataResult>{  
    let params = new URLSearchParams();  
    params.set('Skip', state.skip);  
    params.set('Take', state.take)  
    return this.http  
        .get(this.BASE_URL, { search: params })  
}

然后在控制台中查看您在 .subscribe 方法中获得的内容：

public query(state): void {  
    this.getEmployee(state)  
        .subscribe(yourResponse => console.log(yourResponse ));  
}

待错误解决后，您可以从回复中添加代码。

map() 函数在 Angular 6 中为响应抛出空错误

map() function throwing null error for response in Angular 6

kendo-grid

angular