Question

我是一名新的角度开发人员，但我不知道自己在哪里犯错。我找到了很多资料，但是ı没有改写我的代码。我的代码无法正常工作或无法从Web客户端获取收益。您能帮我解决这个问题吗？

我的示例JSON数据：

{ “ id”：“ 123aCaA-9852”， “ name”：“ A bank”， “ address”：“ adres”， “ contactName”：“示例名称”， “ contactSurname”：“示例”， “ contactPhone”：“ 12312312312”， “状态”：false， “城市”：{ “ id”：40， “ name”：“土耳其”， “代码”：34 }，我的示例ts：

var rows34 = (from r in myDataTable.AsEnumerable()
             where r.Field<int>("KeyColumn") == 34
             select r).ToArray();

var KeyGroups = from r in myDataTable.AsEnumerable()
                group r by r.Field<int>("KeyColumn") into g
                select g;

我的示例kafein.component.ts

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

我的示例component.html

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

  } 

}

Answer 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>

Answer 2

您已经将api数据放入变量中。只需将拼写从“ kafein的kafein”更改为“ letkafe的kafin”

Answer 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

Answer 4

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

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

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

Answer 5

根据我的研究，由于是用户数据，我需要对我的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
  };

如何从Web API Angular 6获取数据

5 个答案: