Angular 如何在一个角度分量的数组中遍历每个模型？

我需要调用一个带有输入和POST的web服务。该服务将返回对象的JSON数组。我想把它们收集成一个有角度的物体阵列，并显示在页面上

打印的不是对象的实际值，而是“Subscribe”的键/值。

http.post

中的

val

打印正确的值。但不确定是否正在使用

返回this.http.post创建
Azureblob
的和数组

型号

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

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

服务

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

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

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




{{key}}


因为您的代码似乎返回了可观察的。您应该在未使用的组件中写入
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.");
      });
}

getAllBlobs（）{
const headers=新的HttpHeaders({
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
});
返回this.http.post（this.serverUrl，
JSON.stringify({
“帐户名”：“abc”，
“acountKey”：“def”，
“容器”：“ghi”，
})，{headers:headers}）；
}

组件中：

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

blobsList:any；
构造函数（私有azureblobService:azureblobService）{}
恩戈尼尼特（）{
这个.getAllBlobs（）；
}
getAllBlobs（）：void{
this.azureblobService.getAllBlobs（）
.订阅(
（val）=>{
log（“正文中返回的调用后成功值”，
val）；
this.blobsList=val；//{
日志（“错误后调用”，响应）；
},
() => {
log（“POST-observable现在完成了。”）；
});
}