Question

我收到以下代码的错误Type 'void' is not assignable to type 'Image[]'。

如何在image.service.ts中返回json数据，以便app.component.ts获得一个Image []类型数组？

app.component.ts

  images: Image[];

  getImages() {
     this.images = this._imageService.getImageData();
   }

image.service.ts

  getImageData() {
    this._http.get('app/test.json').subscribe(res => {
      return res.json();
    })
  }

应用程序/ test.json

[{"id":"1","imageid":"1","imageurl":"http://imageur"}]

Answer 1

通常情况下，我们会subscribe()向http.get()返回this.images。另一种方法是返回一个空数组，然后在从（Web）服务器返回数据时将项目推送到该数组。请务必不要将export class ImageService { images = []; getImageData() { this._http.get('app/test.json').subscribe(res => { this.images.push(...res.json()); // don't do this: this.images = res.json() }); return this.images; } }分配给新数组，否则该组件仍将引用原始空数组。

image.service.ts

...

this answer

请注意，.element, #element { top:20px; right:20px; width:25px; height:10px; opacity:0; transition:opacity 0.4s ease-out;} .element:hover, #element:hover { opacity:1;}是Plunker。

Typescript Angular 2如何将JSON数据从服务返回到组件？

1 个答案: