我如何打印 Angular 5 中服务返回的可观察对象数组的值？

Question

服务将从服务器调用并获取 blob 的信息。我需要打印组件中每个 blob 的详细信息。

angular 服务部分工作正常并获取数据。定义 component.ts 和 html 的正确方法是什么？

浏览器错误

Component.html

<div class="col-md-4" *ngFor="let key of blobsList | keys">
<p>
  <a target="_blank" href="{{blobsList[key].blobName}}">
    <img src="{{blobsList[key].blobName}}" width="100px" height="100px" />
  </a>
</p>
<p><a class="btn btn-default" href="#">{{blobsList[key].blobName}}</a></p>

pipe.ts

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

Component.ts

this.blobService.getAllBlobsJS() {
  .subscribe(
    (val) => {
      console.log("..val =", val);
    },
    response => {
      console.log(" in error", response);
    },
    () => {
      console.log(" observable is now completed.");
    });
  console.log("..values=", this.bList);
}

服务

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);
            localArr.push(new Azureblob(blob.name));
          }
        }
        console.log("localArr - # of blobs returned=", localArr.length);
        return localArr;
      });
     obs.next(this.blobList);
     obs.complete();
 })}

Answer 1

this.blobServiceObj.listBlobsSegmented() 没有 return 任何东西。但是你从你的 observable 发出了它 returns (undefined) 的东西。

与从回调内部发出错误的方式相同，您应该发出成功事件并从那里完成：

getAllBlobsJS(): Observable<Azureblob[]> {
  return new Observable(obs => {
    this.blobServiceObj = AzureStorageBlobServiceJS.createBlobService(this.connectionString);
    this.blobServiceObj.listBlobsSegmented('acs', null, (error, results) => {
      if (error) {
        console.log("**** Error");
        obs.error();
      } else {
        const event = results.entries.map(blob => new Azureblob(blob.name));
        obs.next(event);
        obs.complete();
      }
    });
  });
}

下一个问题是您试图遍历 blobsList，但是属性不存在于您的组件中，并且从未在任何地方填充。即使是这样，您也需要确保在尝试对其应用密钥管道之前已将其初始化。

Answer 2

不太确定您在这里使用的是什么语法。语法有很多问题：

console.log("..values=", this.bList);

以上行将运行同步。所以你可能没有得到 bList 初始化。您还没有将订阅块的成功回调中的 val 分配给 this.bList

改变这个：

this.blobService.getAllBlobsJS() {
  .subscribe(
    (val) => {
      console.log("..val =", val);
    },
    response => {
      console.log(" in error", response);
    },
    () => {
      console.log(" observable is now completed.");
    });
  console.log("..values=", this.bList);
}

为了这个正确的语法：

this.blobService.getAllBlobsJS()
  .subscribe(
    val => {
      console.log("..val =", val);
      this.bList = val;
    },
    error => console.log("in error", error),
    () => console.log(" observable is now completed.")
  );

我如何打印 Angular 5 中服务返回的可观察对象数组的值？

How can i print values from an observable array of objects returned by service in Angular 5?

angular

angular5