Angular 执行休息请愿书

我正在尝试使用Angular执行GET，但它不起作用

我有一个组件，它在构造函数中注入一个自定义服务，这个服务执行rest请求并将结果存储在数组中

下面是

bird.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Bird {
  id: number;
  bird_name: string;
  bird_image: string;
  bird_sightings: string;
  mine: number;
}

@Injectable()
export class BirdService {

  constructor(private http: HttpClient) {
     this.getBirds().subscribe(data => this.birds = data);
  }

  birds: Bird[];

  getBirds() {
    return this.http.get('http://dev.contanimacion.com/birds/public/getBirds/1');
  }

}

import { Component, OnInit } from '@angular/core';
import { BirdService } from '../bird.service';

@Component({
  selector: 'app-birds',
  templateUrl: './birds.page.html',
  styleUrls: ['./birds.page.scss'],
})

export class BirdsPage implements OnInit {

  constructor(public birdService: BirdService) { }

  ngOnInit() {
  }

}

下面是

bird.page.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface Bird {
  id: number;
  bird_name: string;
  bird_image: string;
  bird_sightings: string;
  mine: number;
}

@Injectable()
export class BirdService {

  constructor(private http: HttpClient) {
     this.getBirds().subscribe(data => this.birds = data);
  }

  birds: Bird[];

  getBirds() {
    return this.http.get('http://dev.contanimacion.com/birds/public/getBirds/1');
  }

}

import { Component, OnInit } from '@angular/core';
import { BirdService } from '../bird.service';

@Component({
  selector: 'app-birds',
  templateUrl: './birds.page.html',
  styleUrls: ['./birds.page.scss'],
})

export class BirdsPage implements OnInit {

  constructor(public birdService: BirdService) { }

  ngOnInit() {
  }

}

最后是

bird.page.html

<ion-content>
  <div *ngFor="let bird of birdService.birds"></div>
</ion-content>

---

尝试以下两种方法

一个选项是，您可以添加async关键字来订阅可观察的

<div *ngFor="let bird of birdService.getBirds()|async"></div>

Observables是惰性的，这意味着如果没有subscribe，它将不会启动调用或发出，当您使用async关键字时，angular将自动为您订阅

您也可以像下面这样手动订阅

constructor(private birdService: BirdService) { }
  birds:Bird[];
  ngOnInit() {
    this.birdService.getBirds().subscribe((res)=>{
   this.birds=res;
     });
  }

<div *ngFor="let bird of birdService.birds"></div>

constructor（私有birdService:birdService）{}
鸟:鸟(只);；
恩戈尼尼特（）{
this.birdService.getBirds（）.subscribe（（res）=>{
这个。鸟=物；
});
}

建议使用第一种方法，因为当组件破坏时，它也会取消可观测值

---

也不建议订阅服务构造函数，请始终将视图模型保留在组件上。

我发现了一些问题。1.您永远不会订阅HTTP rest返回的可观察对象。因此，请求永远不会被触发。如果您要查看dev工具中的network选项卡，您是否看到请求正在进行中？您可以订阅BirdPage.ts组件文件中的服务。也可以在模板中使用“异步”管道。这样做将自动为您订阅该服务。将类更改为这样的内容。birds=this.birdservice.getBirds（）。然后在模板中执行*ngFor=“let bird of birds | async”应该可以满足您的需要。@Edward First subscription在服务构造函数中，如果您添加

|async

并在其周围使用

*ngIf

，它将调用太多次服务。这更像是一个传输错误。您是否尝试过

this.http.get（'http://dev.contanimacion.com/birds/public/getBirds/1）

？