如何遍历角度组件数组中的每个模型？

Question

我需要使用输入和POST调用Web服务。该服务将返回对象的JSON数组。我想将它们收集到对象的Angry Arrya中，并将其显示在页面上。

正在打印“订阅”的键/值，而不是对象的实际值。 val中的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.");
      });
}