如何从 web api Angular 6 获取数据答案

【问题标题】：How to make fetch data from web api Angular 6如何从 web api Angular 6 获取数据
【发布时间】：2018-08-02 21:32:39
【问题描述】：

我是一个新的 Angular 开发人员，但我不知道我错在哪里。我找到了很多来源，但我没有调整我的代码。我的代码不起作用或无法从网络客户端获取您能帮我解决这个问题吗？

我的 JSON 数据示例：

{ “id”：“123aCaA-9852”， "name": "一家银行", “地址”：“地址”， "contactName": "示例姓名", "contactSurname": "示例", "联系电话": "12312312312", “状态”：假， “城市”： { “身份证”：40， “名称”：“土耳其”， “代码”：34 }, 我的示例 ts：

export class Kafein {
    name:string;
    address:string;
}

我的例子 kafein.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Kafein } from './kafein';
import { Observable } from 'rxjs/internal/Observable';
@Component({
  selector: 'app-kafein',
  templateUrl: './kafein.component.html',
  styleUrls: ['./kafein.component.css']
})
export class KafeinComponent implements OnInit {
  title = "Kafein";
  //kafein:Observable<Kafein[]>;
  kafein:Kafein[];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getProducts();
  }
  getProducts(){

   //this.kafein = this.http.get<Kafein[]>('http:example');
   this.http.get<Kafein[]>('http:example').subscribe(res=>{this.kafein=res});

  } 

}

我的示例组件.html

<tr *ngFor='let kafein of Kafein'>
        <th scope="row">1</th>
        <td>{{kafein.name}}</td>
        <td>{{kafein.adress}}</td>
</tr>

【问题讨论】：

控制台有什么错误？
在我的屏幕上返回空数据
@EmreSert 你试过这个吗：this.kafein=res as Kafein[]
我解决了这个问题。非常感谢。

标签： angular rest api

【解决方案1】：

你应该更好地命名你的变量：

let kaf of kafein // <---change the K in Kafein to k(lowercase)

并在模板中使用kaf 作为变量。

<tr *ngFor='let kaf of kafein'>
     <th scope="row">1</th>
     <td>{{kaf.name}}</td>
     <td>{{kaf.adress}}</td>
</tr>

【讨论】：

【解决方案2】：

您已经将 api 数据放入您的变量中。只需将拼写从 'let kafein of Kafein' 更改为 'let kaf of kafein''

【讨论】：

控制台有数据吗？从 api 绑定数据时请使用控制台。在您上面的 json 中，您有两个以上的对象。所以请在没有你的课程的情况下使用它。只需将其绑定到一个变量并直接在您的视图中使用即可。

【解决方案3】：

制作一个service.ts文件并制作一个这样的函数

getUsers(){
return  this.httpClient.get("http:example");
}

并在你的组件中导入这个 service.ts，然后像这样调用你的服务函数

getUsers(){
this.apiService.getUsers().subscribe((data:  Array<object>) => {
    this.kafein  =  data;
    console.log(data);
});

如果您需要进一步的指导，请关注Link

【讨论】：

【解决方案4】：

ngFor 用于循环遍历数组，但您的数据包含一个对象。我猜下面的代码会起作用：

<tr>
        <th>1</th>
        <td>{{kafein['name']}}</td>
        <td>{{kafein['adress']}}</td>
</tr>

但那是在确保您首先获取数据之后。为此，请检查 Ahsan Alam Siddiqui 的答案

【讨论】：

【解决方案5】：

根据我的研究，由于是用户数据，我需要使用令牌为我的 api 进行授权过程。顺便说一下，我从银行服务器拿走了我的 api，我忘了说你。问题用下面的代码解决了.非常感谢小写kafein而不是Kafein :)

httpOptions = {
    headers: new HttpHeaders({
      'Authorization':'bearer exampletoken',// TOKEN 
      'Access-Control-Allow-Origin':'*',
      'Access-Control-Allow-Methods':'*',
      'Access-Control-Allow-Headers':'*'
    }),
    withCredentials: false
  };

【讨论】：