Угловое выполнение REST петиция - PullRequest
Новая
       7

Угловое выполнение REST петиция

0 голосов
/ 07 июня 2019

Я пытаюсь выполнить GET с помощью Angular, но он не работает.

У меня есть компонент, который внедряет пользовательский сервис в конструктор, этот сервис выполняет остальную петицию и сохраняет результат в массиве..

Следующее - 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');
  }

}

Следующее - bird.page.ts

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>

Я получаю следующие ошибки: 

[ng] ERROR in src/app/bird.service.ts(16,40): error TS2322: Type 'Object' is not assignable to type 'Bird[]'.
[ng] The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
[ng] src/app/bird.service.ts(16,40): error TS2322: Type 'Object' is not assignable to type 'Bird[]'.
[ng] The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
[ng] Property 'length' is missing in type 'Object'.

1 Ответ

0 голосов
/ 07 июня 2019

Попробуйте использовать два подхода ниже

Один из вариантов: вы можете добавить асинхронное ключевое слово, чтобы подписаться на наблюдаемоеПри использовании асинхронного ключевого слова Angle вы будете автоматически подписываться на звонок или передачу.

Вы также можете подписаться вручную, как показано ниже.

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

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

Предложен первый подход, поскольку он также отменяет подписку наблюдаемого при уничтожении компонента.

Также не рекомендуется подписываться на конструктор службы, всегда сохраняйте модель представления для компонента.

...