从Angular 5中的服务返回Observable <object []>时出现“ subscribe”未定义错误?

时间:2018-10-24 21:34:40

标签: angular typescript angular5

我正在为外部服务重新调整的每个值构建对象new Azureblob(blob.name,并将其添加到数组new Azureblob(blob.name中。也可以从匿名函数return localArr返回此值。

问题:

  1. 我们如何通过方法将其返回给组件使用?
  2. 是否还需要将其设置为Observable<Azureblob[],因为该服务需要一段时间才能从服务器获取数据?

模型

export class Azureblob {
  blobName: string;

  constructor(private blobName1: string) {
    this.blobName = blobName1;
  }
}  

服务。这是正确的吗?

 import { Azureblob } from '../models/azureblob';
 ..
 export class BlobService {
   constructor() { }
   blobServiceObj: any;
   blobList: Observable<Azureblob[]> = of([]);

   getAllBlobsJS(): Observable<Azureblob[]> {
     var localArr: Azureblob[] = [];

     this.blobServiceObj = AzureStorageBlobServiceJS.createBlobService(this.connectionString);

     this.blobList = this.blobServiceObj.listBlobsSegmented('acs', null, function (error, results) {
        if (error) {
         console.log("**** Error");
        } else {
          for (var i = 0, blob; blob = results.entries[i]; i++) {
             console.log("Blob ", i, blob); /** SEE BELOW **/
             localArr.push(new Azureblob(blob.name));
           }
        }
         console.log("localArr - # of blobs returned=", localArr.length); /** SEE BELOW **/
        return localArr;
      });

      return this.blobList;
   }

该服务运行正常,并返回结果为

 Blob 0 
 BlobResult {name: "Git-Logo-1788C.png", creationTime: "Mon, 17 Sep 2018 17:57:39 GMT", lastModified: "Mon, 17 Sep 2018 17:57:39 GMT", etag: "0x8D61CC70ED10A9F", contentLength: "5684", …}

 localArr - # of blobs returned= 4

组件

blobList: Azureblob[] = [];

this.blobService.getAllBlobsJS()
  .subscribe(
    (val) => {
      console.log("..values=", val);
    });

我看到的错误 enter image description here

1 个答案:

答案 0 :(得分:1)

getAllBlobsJS应该以可观察的形式返回,以便您可以订阅它。

getAllBlobsJS(): Observable<Azureblob[]> { return new Observable(obs=>{ var localArr: Azureblob[] = []; this.blobServiceObj = AzureStorageBlobServiceJS.createBlobService(this.connectionString); this.blobList = this.blobServiceObj.listBlobsSegmented('acs', null, function (error, results) { if (error) { console.log("**** Error"); obs.error(); } else { for (var i = 0, blob; blob = results.entries[i]; i++) { console.log("Blob ", i, blob); /** SEE BELOW **/ localArr.push(new Azureblob(blob.name)); } } console.log("localArr - # of blobs returned=", localArr.length); /** SEE BELOW **/ return localArr; }); obs.next(this.blobList); obs.complete(); })}