无法以角度调用 api

Question

我正在尝试使用 httpClinent 方法调用api，当我登录时，我得到的结果为 undefined。

下面是services文件代码。

contact-service.services.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Customers } from 'src/app/mymodels/app.models';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class ContactServiceService {
 private baseUrl: string  = '............api URL..........';

 constructor(private http:HttpClient) { }

  getCustomers(){

   return this.http.get(this.baseUrl).subscribe(data => {});

  }

}

app.models.ts

 export interface Customers {
  id:                     string;
  firstName:              string;
  lastName:               string;
  fullName:               string;
}

组件代码

TS

 import { Component, OnInit } from '@angular/core';
 import {
   FormBuilder,
   FormControl,
   FormGroup,
  Validators,
   } from '@angular/forms';
import { map } from 'rxjs/operators';
import { Customers } from 'src/app/mymodels/app.models';
import { ContactServiceService } from 'src/app/Services/contact- 
    service.service';

 @Component({
  selector: 'app-get-contact',
  templateUrl: './get-contact.component.html',
  styleUrls: ['./get-contact.component.css']
 })

 export class GetContactComponent implements OnInit {
  public customers : Customers [];

  constructor(public customersService: ContactServiceService) { }

  ngOnInit() {
   this.customers = this.customersService.getCustomers();

    console.log(this.customers);  

   }

 }

HTML

<div *ngFor="let customer of customers">
  <p>{{customer.firstName}}</p>
</div>

Answer 1

你的服务代码就像，

getCustomers(){
   return this.http.get(this.baseUrl);
}

并在您的组件中调用 .subscribe，如下所示，

 ngOnInit() {
   this.customersService.getCustomers().subscribe((data)=> {
    this.customers = data;
    console.log(this.customers);  
});