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

【问题标题】：How can i print values from an observable array of objects returned by service in Angular 5?如何从 Angular 5 中的服务返回的可观察对象数组中打印值？
【发布时间】：2018-10-27 23:27:19
【问题描述】：

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

角度服务部分工作正常并获取数据。定义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();
 })}

【问题讨论】：

显示您分配blobsList的部分

标签： angular angular5

【解决方案1】：

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

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.")
  );

【讨论】：

【解决方案2】：

this.blobServiceObj.listBlobsSegmented() 不返回任何东西。但是你从你的 observable 中发出它返回的（未定义的）。

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

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，但您的组件中不存在该属性，并且从未在任何地方填充。即使是这样，您也需要确保在尝试对其应用密钥管道之前对其进行初始化。

【讨论】：