Angular 获取响应数据?

Question

这是 console.log(res) 结果

但是直接 res.data 会报错, 因为在编译期间认为res下没有data

想问一下我要怎么取到里面的data?

当前请求的核心代码如下

employee.service.ts

export class EmployeeService {

  apiUrl: string = 'http://localhost:8080/employee';

  constructor(private httpClient: HttpClient) { }

  list() {
      return this.httpClient.get(this.apiUrl + '/list');
  }

}

employee.component.ts

ngOnInit(): void {
  this.employeeService.list().subscribe(res => {
    console.log(res);
  })
}

EmployeeController.java

@RestController
@RequestMapping("/employee")
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @GetMapping("/list")
    public Map<String, Object> list() {
        Map<String, Object> result = new HashMap<>();
        List<Employee> data = employeeService.list();
        result.put("msg", "success");
        result.put("data", data);
        return result;
    }

}

Answer 1

接口是没问题的，是你的服务方法没有指明返回类型所以给了你属性错误提示

service里

list() {

  return this.httpClient.get<{data:any[];msg:string}>(this.apiUrl + '/list');

}

或者component里

.list().subscribe((res:any)=> res.data …)

Answer 2

第一种，使用any

this.employeeService.list().subscribe((res: any) => {
    console.log(res.data);
})

第二种，指定返回值类型

interface ServiceResponse {
    data: '你的数据'
}
this.employeeService.list().subscribe((res: ServiceResponse) => {
    console.log(res.data);
})

Answer 3

  list(): Observable<{data: any[], msg: string}> {
      return this.httpClient.get<{data: any[], msg: string}>(this.apiUrl + '/list');
  }

Answer 4

data改成any属性或者写一个data的interface结构

俗称 anysctipt