Как перебрать каждую модель в массиве в угловом компоненте?

Question

Мне нужно вызвать веб-сервис с входами и POST.Служба будет возвращать массив объектов JSON.Я хотел собрать их в Angular Arrya of Objects и отобразить их на странице.

Вместо фактических значений объектов, ключ / значения «Подписаться» печатается.val in http.post печатает правильные значения.Но не уверен, что и массив Azureblob создается с return this.http.post<Azureblob[]>(this.serverUrl...?

. Оцените любую помощь в этом.

модель

export class Azureblob {
  blobName: string;
  blobURL: string;
  blboMimeType: string;
}

сервис

getAllBlobs() {
const headers = new HttpHeaders({
  'Content-Type': 'application/json',
  'Accept' : 'application/json'
});

return this.http.post<Azureblob[]>(this.serverUrl,
  JSON.stringify({
    "acountName": "abc",
    "acountKey": "def",
    "container":"ghi",
  }),{headers: headers}).subscribe(
  (val) => {
    console.log("POST call successful value returned in body",
      val);
  },
  response => {
    console.log("POST call in error", response);
  },
  () => {
    console.log("The POST observable is now completed.");
  });
}

труба

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
   transform(value: {}): string[] {
     if (!value) {
       return [];
     }
     return Object.keys(value);
   }
}

компонент

blobsList : any;
constructor(private azureblobService : AzureblobService) { }
ngOnInit() {
  this.getAllBlobs();
}

getAllBlobs() : void {
  this.blobsList = this.azureblobService.getAllBlobs();
}

компонент html

<div>
   <ul>
     <li *ngFor="let key of blobsList | keys">
      {{key}}
     </li>
   </ul>
</div>

Answer 1

Поскольку ваш код, кажется, возвращается наблюдаемым.Вы должны написать subscribe оператор в компоненте не в обслуживании.

В обслуживании:

getAllBlobs() {
    const headers = new HttpHeaders({
      'Content-Type': 'application/json',
      'Accept' : 'application/json'
    });

    return this.http.post<Azureblob[]>(this.serverUrl,
      JSON.stringify({
        "acountName": "abc",
        "acountKey": "def",
        "container":"ghi",
      }),{headers: headers});
}

В компоненте:

blobsList : any;
constructor(private azureblobService : AzureblobService) { }
ngOnInit() {
   this.getAllBlobs();
}

getAllBlobs() : void {
  this.azureblobService.getAllBlobs()
  .subscribe(
      (val) => {
        console.log("POST call successful value returned in body",
          val);
        this.blobsList = val; //<====== Set value here
      },
      response => {
        console.log("POST call in error", response);
      },
      () => {
        console.log("The POST observable is now completed.");
      });
}