angular - 如何从 Web api Angular 6 获取数据

Question

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

我的示例 JSON 数据:

{ "id": "123aCaA-9852", "name": "某银行", “地址”:“地址”， "contactName": "示例名称", "contactSurname": "示例", "联系电话": "12312312312", “状态”:假的， “城市”: { “编号”:40， "name": "火鸡", “代码”: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});

  } 

}

我的示例 component.html

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

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>