Как я могу напечатать значения из наблюдаемого массива объектов, возвращаемых сервисом в Angular 5?

Question

Служба позвонит и получит информацию о больших двоичных объектах с сервера.Мне нужно напечатать детали каждого большого двоичного объекта в моем компоненте.

Угловая сервисная часть работает нормально и получает данные.Как правильно определить 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

Не совсем уверен, какой синтаксис вы используете здесь.Существует много проблем с синтаксисом:

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

Answer 2

this.blobServiceObj.listBlobsSegmented() не ничего не возвращает . Но все же вы излучаете то, что он возвращает (не определено) из вашей наблюдаемой.

Так же, как вы выдаете ошибку изнутри обратного вызова, вы должны отправить успешное событие и завершить его оттуда:

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, но это свойство не существует в вашем компоненте и никогда нигде не заполняется. И даже если бы это было так, вам нужно убедиться, что он инициализирован, прежде чем пытаться применить к нему канал ключей.