代码之家 › 专栏 › 技术社区 › Lucass

角度HTTP GET

typescript angular json

-3

Lucass · 技术社区 · 6 年前

我有一个服务器在运行“本地主机:3000". 它以JSON格式显示数据,例如“localhost:300/个位置".
“我的”数据服务.ts“包括以下代码:

path: string = 'http://localhost:3000'
constructor(private http: HttpClient) { }

// Locations
getAllLocations(): Observable<Location[]> {
  let location = null;
  this.http.get(this.path + '/locations')
    .map((res => location = res))
    .catch((error: any) => Observable.throw(console.log(error)));
  return location;
}

在我的结果.component.ts我正在运行以下代码:

constuctor(private dataservice: DataService) { }

ngOnInit() {
  console.info(this.dataservice.getAllLocations());
}

我希望将所有位置作为JSON输出,而不是输出为“null”。

有没有人对如何使它正常工作有什么建议?

更新: 还尝试了以下HTTP调用:

getAllLocations(): Observable<Location[]> {
  this.http.get<Location[]>(this.path + '/locations')
    .pipe(
      tap(items => console.info('fetched items'))
    );  
}

不幸的是,这段代码的输出是:“Object{u isScalar:false,source:{…},operator:{…}”

2 回复 | 直到 6 年前

plvice 6 年前

您必须从服务返回Observable:

path: string = 'http://localhost:3000'
constructor(private http: HttpClient) { }

// Locations
getAllLocations(): Observable<Locations[]> {
  return this.http.get(this.path + '/locations')
    .map((res => location = res))
    .catch((error: any) => Observable.throw(console.log(error)));
}

并在组件中订阅它。

constructor(private dataservice: DataService) { }

ngOnInit() {
  this.dataservice.getAllLocations().subscribe(result => {
      console.log(result);
   })
}

Edric Prince Bansal 6 年前

HttpClient#get 返回一个 Observable ? 你可以把钱还回去 get

其次,您可以为该方法设置一个接口,以便它将返回类型化的JSON。

最后,可以在API URL中使用模板文本。

/**
 * Retrieves a list of locations.
 * (TODO: Add better documentation here)
 */
getAllLocations(): Observable<Location[]> {
  return this.http.get<Location[]>(`${this.path}/locations`);
}

constuctor(private dataservice: DataService) { }

ngOnInit() {
  this.dataservice.getAllLocations().subscribe(result => {
    console.log(result);
  });
}

推荐文章

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

3 月前

Zoddo · 属性在明确定义时可能为“未定义”

4 月前

Abdulkerim Awad · 带有泛型的Typescript函数重载无法按预期工作

4 月前

Sanitysign · 为什么{}类型可分配给对象类型?

4 月前

IvonaK · 使用Vite和React在Tauri应用程序中集成shadcn/ui和Tailwind CSS v4

4 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

Xunnamius · 为什么TypeScript在有条件地推断数组末尾的可选元素时遇到困难?

4 月前

njord · 基于函数的Typescript返回类型

4 月前