Question

在我的服务器中，我得到了这样的：

public class PreNewProjetDTO {
    public List<BasicItemDTO> etatsProj;
}

public class BasicItemDTO {
    public Integer id;
    public String label;
}

但是当我用angular 5

尝试这个ajax调用时

  ngOnInit() {

    this.http.get('/api/new-projet').subscribe(data => {

      console.log(data);

      for (let ep in data.etatsProj) {
        console.log(ep.label); 
      }

    });
  }

我得到了json

{
 "etatsProj":
    [
       {"id":1,"label":"programmé"},
       {"id":2,"label":"en cours"},
       {"id":3,"label":"achevé"},
       {"id":4,"label":"annulé"}
    ]
}

我收到了这个错误

ERROR in src/app/new-projet/new-projet.component.ts(23,27): error TS2339: Property 'etatsProj' does not exist on type 'Object'.
src/app/new-projet/new-projet.component.ts(24,24): error TS2339: Property 'label' does not exist on type 'string'.

Answer 1

第一个选项

您可以尝试定义any类型的变量，并为其分配从服务器获取的数据。

 this.http.get('/api/new-projet').subscribe(data => {

   console.log(data);
   let newData: any = data;
   for (let ep of newData.etatsProj) {
    console.log(ep.label); 
   }

});

或者做同样事情的另一种方式：

this.http.get<any>('/api/new-projet').subscribe(data => {

   for (let ep of data.etatsProj) {
    console.log(ep.label); 
   }

});

不建议使用此选项，因为我们正在处理我们正在处理的变量类型。

第二个选项

使用新的HttpClient，无需解析JSON响应。但是，从documentation我们必须这样做：

responseType值确定如何解析成功的响应正文。如果responseType是默认的json，则结果对象的类型接口可以作为类型参数传递给request（）。

因此，您可以在同一组件中定义新接口，或将它们添加到global.d.ts文件中以进行输入。

Interface PreNewProjetDTO {
    let etatsProj: BasicItemDTO[];
}

Interface BasicItemDTO {
    let id: number;
    let label: string;
}

你将以这种方式重写get函数：

 this.http.get<PreNewProjetDTO>('/api/new-projet').subscribe(data => {

   for (let ep of data.etatsProj) {
    console.log(ep.label); 
   }

});

Answer 2

您需要做的是首先将响应映射到json，如

.map（result =＆gt; result.json（））

然后你可以使用把json转换成数据类型

this.http.get('/api/new-projet')
    .map(result => result.json());
    .subscribe((data: PreNewProjetDTO) => {

      console.log(data);

      for (let ep in data.etatsProj) {
        console.log(ep.label); 
      }

    });

访问httpClient数据响应属性时出错

2 个答案: