angular - 如何使用 Angular 6 从 Web API 服务中创建列表

Question

我是 Angular 6 的新开发人员。当我为我的项目制作清单时，该项目在我的浏览器上提供了 [object Object] 之类的东西。我使用另一个模型来获取城市信息。你觉得我需要做什么？如果你愿意，你可以在 Angular 5 上回答。我可以翻译成 Angular 5。你能帮我解决这个问题吗？

我的 json 数据是；{ "id": "", "name": "A bank", "address": "adres", "contactName": "Jack", "contactSurname": "Jones", "contactPhone": "[phone]", “状态”：真，“城市”：{ “id”：40，“名称”：“伊斯坦布尔”，“代码”：34 }，“城镇”：{ “id”：459，“名称”：“Beyoglu” ，“城市”：{“id”：40，“名称”：“伊斯坦布尔”，“代码”：34 } } }，

• 我的示例输出

一家银行地址 Jack Yektan Jones [phone] true [object Object] [object Object]

• 模型银行

      export class Bank{
        id: string;
        name: string;
        address: string;
        contactName: string;
        contactSurname: string;
        contactPhone: string;
        secondContactPhone: string;
        bankLogo: any;
        town: Town;
        city: City;
      }
  

• 模范城市

  export class City extends ResponseError{
    id: number;
    name: string;
    code: number;
  }
  

-我的示例服务

- My services

    import { Injectable } from '@angular/core';
    import { HttpClient/*,HttpHeaders */} from "@angular/common/http";
    import { Bank } from "../models/bank";
    import { Observable } from '../../node_modules/rxjs/Observable';

    @Injectable()
    export class BankService {


    constructor(private http:HttpClient) { }

    getContent(): Observable<Bank[]>{
        return this.http.get<Bank[]>('exampleurl');
    }
    }

- 我的组件

import { Component, OnInit } from '@angular/core';
import { Bank } from '../models/bank';
import { BankService } from './bank.service';

@Component({
  selector: 'app-bank',
  templateUrl: './bank.component.html',
  styleUrls: ['./bank.component.css'],
  providers:[BankService]
})
export class BankComponent implements OnInit {
  title="Bank";
  bank:Bank[];
  constructor(private bankService:BankService) { }

  ngOnInit() {
    this.getContent();
  }
  getContent(){
    this.bankService.getContent().subscribe(res=>{this.bank=res;});
  }
}

-HTML

   <tr *ngFor='let bnk of bank;let i = index'>
        <th scope="row">{{ i+1 }}</th>
        <td>{{bnk.name}}</td>
        <td>{{bnk.address}}</td>
        <td>{{bnk.contactName}}</td>
        <td>{{bnk.contactSurname}}</td>
        <td>{{bnk.contactPhone}}</td>
        <td>{{bnk.secondContactPhone}}</td>
        <td>{{bnk.status}}</td>
        <td>{{bnk.bankLogo}}</td>
        <td>{{bnk.town}}</td>
        <td>{{bnk.city}}</td>
      </tr>

标签： angularresthttpclient