[angular] Api w zewnetrznej aplikacji, nie chce pobierać wartości |
[angular] Api w zewnetrznej aplikacji, nie chce pobierać wartości |
18.05.2020, 16:41:50
Post
#1
|
|
Grupa: Zarejestrowani Postów: 107 Pomógł: 0 Dołączył: 24.06.2010 Skąd: Warszawa Ostrzeżenie: (0%) |
mam API w PHP:
w postmanie działa tak jak trzeba: [get] http://127.0.0.1:8000/api/lista - wyświetla dane [put] http://127.0.0.1:8000/api/lista/id - aktualizuje wpis [delete] http://127.0.0.1:8000/api/lista/id - kasuje rekord z bazy Teraz chcę to połączyć na froncie używając angulara: w environment.ts i environment.prod.ts mam dodaną linijkę: Kod // URL of development API apiUrl: 'http://127.0.0.1:8000/api' w api.service.ts dopisane: Kod import { environment } from 'environments/environment'; const API_URL = environment.apiUrl; @Injectable() export class ApiService { constructor( private http: Http ) { } public getAllList(): Observable<List[]> { return this.http .get(API_URL + '/lista') .map(response => { const list = response.json(); return lists.map((list) => new List(list)); }) .catch(this.handleError); } w list.service.ts Kod import {Injectable} from '@angular/core'; import {List} from './list'; import { ApiService } from './api.service'; import { Observable } from 'rxjs/Observable'; @Injectable() export class ListDataService { constructor( private api: ApiService ) { } // Simulate GET /lists getAllLists(): Observable<List[]> { return this.api.getAllLists(); } } w list.component.html: Kod <div class="view"> <label>{{list.name}}</label> <label>{{list.text}}</label> <label>{{list.email}}</label> <button class="destroy" (click)="removeList(list)"></button> </div> w list.component.ts: Kod import { Component, Input, Output, EventEmitter } from '@angular/core'; import { List } from '../list'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.css'] }) export class ListComponent { @Input() list: List; @Output() remove: EventEmitter<List> = new EventEmitter(); @Output() toggleComplete: EventEmitter<List> = new EventEmitter(); constructor() { } removeList(list: List) { this.remove.emit(list); } } i w zasadzie nie wiem co dalej - jak i gdzie dodać getAllList(), aby pobierało dane z bazy i wyświetlało na stronie? Aplikacja angularowa działa pod adresem http://localhost:4200/ Ten post edytował poczatkujaca12 18.05.2020, 16:51:37 |
|
|
Wersja Lo-Fi | Aktualny czas: 25.09.2024 - 08:06 |