Angular 4 + Web API 无法使用 GET 方法检索数据答案

【问题标题】：Angular 4 + Web API can't retrieve data with GET methodAngular 4 + Web API 无法使用 GET 方法检索数据
【发布时间】：2017-09-14 14:57:03
【问题描述】：

当我在本地服务器 (http://localhost:51085/api/GetMethod) 上调用 GET 方法时，我的 Web APPI 工作正常，它检索到正确的对象数组。

但是，当我从 Angular4 应用程序调用它时，返回的 observable 显示

[object Object] 和 *ngFor 的错误（错误错误：找不到 'object' 类型的不同支持对象'[object Object]'。吴福仅支持绑定到 Iterables，例如 Arrays。）。

export class AppComponent { 

   myDesiredDataFromServer$; 

   constructor(private service: ServiceHTTP) { 
      this.myDesiredDataFromServer = service.getData(); 
   }
}

有什么帮助吗？

【问题讨论】：

您可以为 Angular 4 添加代码吗？
您能否也发布您的 api 数据示例？
如果你要返回一个 observable，使用 ngFor 中的异步管道来映射它
我已经在使用异步 JayDeeEss : *ngFor="let item of myDesiredDataFromServer $ | async"
ok..希望 myDesiredDataFromServer 和 $ 之间的空格是错字，为什么 ts 文件中有不同的名称，有和没有 $??

标签： angular asp.net-web-api

【解决方案1】：

我认为你的问题是你没有等待服务器的响应..

如果您在 .ts 中的服务返回 Observable<Array<any>>

那就试试吧：

   export class AppComponent { 

       myDesiredDataFromServer$; 



 constructor(private service: ServiceHTTP) { 


       service.getData().subscribe((resp)=>{
             this.myDesiredDataFromServer = resp;
        }); 
       }
    }

如果它返回一个Promise<Array<any>>:

export class AppComponent { 

       myDesiredDataFromServer$; 

       constructor(private service: ServiceHTTP) { 
          service.getData().then((resp)=>{
             this.myDesiredDataFromServer = resp;
             }); 
       }
    }

如果它返回一个async:

 export class AppComponent { 

       myDesiredDataFromServer$; 

       async constructor(private service: ServiceHTTP) { 
         this.myDesiredDataFromServer = await  service.getData();
       }
    }

【讨论】：

谢谢 Federico。我会试试的。
现在告诉我如果它有效..如果你也可以发布你的服务代码
订阅后我可以在返回的“_body”属性看到正确返回的数据数组。使用 service.getData().subscribe((resp)=>{ this.myDesiredDataFromServer$ = (( resp)['_body']); console.log("Ret -> ", this.myDesiredDataFromServer$); }); 但无法使用 *ngFor 渲染 -> 错误错误：InvalidPipeArgument: '[{"Date": "2017-09-13T00:00:00",...等（显示我的数据数组）

【解决方案2】：

试试

export class AppComponent { 

   public myDesiredDataFromServer$; 

   constructor(private service: ServiceHTTP) { 
      this.myDesiredDataFromServer$ = service.getData(); 
   }
}

然后，如果它是可观察的，请尝试在模板中执行以下操作以打印出完整的对象，而不仅仅是 [object Object]

{{ myDesiredDataFromServer$ | async | json }}

如果您的 ServiceHTTP getData 方法返回了一个 observable，那么您至少应该能够看到您获取的数据的格式。如果您在 *ngFor 中使用它，请确保它是数组类型

例如如果它打印 { someKey: [] } 那么你可以运行 *ngFor="let item of (myDesiredDataFromServer$ | async)?.someKey"

【讨论】：

嗨丹尼尔，我的数据位于响应 _body 属性中，但无法使用 *ngFor 呈现它 -> 错误错误：InvalidPipeArgument: '[{"Date":"2017-09-13T00:00 :00", ...等与我的数组数据
所以在你的模板 {{ myDesiredDataFromServer$ |异步 | json }} 显示那个对象？如果是这样，请尝试
Looped
如果 {{ myDesiredDataFromServer$ | async | json }} 显示 {response_body: [{"Date":"2017-09-13T00:00:00}]} 然后尝试 <div *ngFor="let item of (myDesiredDataFromServer$ | async).response_body">Looped</div>
如果异步管道在您的模板中根本不起作用，您可以随时订阅控制器中的更新并更新 *ngFor 循环通过的变量。例如public myVariable = []; service.getData().subscribe(data => {this.myVariable = data.response_body});，然后是<div *ngFor="let item of myVariable">looped</div>

【解决方案3】：

这行得通：

service.getData().subscribe((resp)=>{
    this.myDesiredDataFromServer$ = JSON.parse((resp)['_body']);

});

enter code here

【讨论】：