[Angular 4] Pobieranie danych z MySQL

Question

Witajcie.

Samo pobieranie nie sprawia mi problemów. Ot wystarczy stworzyć metodę getCharacters() w service

  getCharacters(){
    return this.http.get('http://localhost/something/controller/characters')
              .map(
                (response: Response) => {
                  return response.json();
                }
              );
  }

Później w kolejnym komponencie, w którym zamierzam wyświetlić listę postaci wystarczy użyć subscribe().

    this.charactersService.getCharacters().subscribe(
      (characters) => {
        this.characters = characters;
      }
    );

Oczywiście to zadziała, ale jest to rozwiązanie na pół gwizdka. W końcu chciałbym, żeby wiele komponentów korzystało z tej tabeli. Dlatego w moim odczuciu najbardziej optymalne będzie utworzenie jednej tabeli w service, która będzie zawierała pobrane z bazy danych dane. Wiecie jak to zrobić?

Answer 1

no robisz dokładnie to samo w tym service  co w komponencie :P
 

@Injectable()
export class CharackterService {
    private characters: Array<any> = [];
    constructor(private http: HttpClient) { }
     

    getCharacterArray(): Array<any> { 
        return this.characters;
    }

   getHttpCharacters(): Promise<any> {
       return this.http(url)
                       .toPromise()
                       .then(res => Promise.resolve(res))
                        .catch(err => Promise.reject(err);
    }

   setCharacters(): void {
         this.getHttpCharacters()
                .then(res => this.characters = res)
                .catch(err => console.error('Wrong: ' + err);
   }
}

 

Albo po prostu w twoim komponencie możesz setować wynik z pobrania get do tablicy w tym serwisie :P

 

EDIT

@Injectable()
export class CharackterService {
    private characters: Array<any> = [];
    constructor(private http: HttpClient) { }
     

    getCharacterArray(): Array<any> { 
        return this.characters;
    }

   getHttpCharacters(): Promise<any> {
       return this.http(url)
                       .toPromise()
                       .then(res => this.characters = res)
                       .then(res => Promise.resolve(res))
                       .catch(err => Promise.reject(err);
    }
}

Teraz w komponencie sobie wywołaj 
 

this.charackterService .getCharacters().then(res => _to co chcesz z nim zrobic_);

 

Comments

ja to robię w ten sposób, że mam katalog characters i wewnątrz niego znajduje się ten service i komponenty powiązane, takie jak: characters-list [wyświetla listę], character-detail  [szczegóły], character [character-list w pętli drukuje właśnie ten komponent poprzez przekazanie danego wywołania pętli w taki sposób

<app-character
  *ngFor = "let character of characters"
  [character] = "character"
></app-character>

]

---

Pokaż kod, bo wróżę z fusów :)

---

OK. Tylko kod pokażę na podstawie Timeline. Działają dokładnie tak samo jak characters, ale w characters już sporo pozmieniałem i np. usunąłem metodę getCharacter dzięki której chaacter-detail ma w ogóle sens. Na chwilę obecną dane pobieane są na podstawie utworzonej przeze mnie tablicy a chciałbym, żeby były one pobierane z serwera..

timeline.module.ts

export class TL {
  id          : number;
  name        : string;
  date        : string;
  photo       : string;
  description : string;
}

timeline.ts

import { TL } from './timeline.module';

export const Timeline: TL[] = [
  {
    id    : 1,
    name  : 'Rewolucja w Asturii',
    date  : '19-11-1934',
    photo : 'http://oviedo.for91days.com/photos/Oviedo/miners-strike/Revolucion-de-Asturias.jpg',
    description: 'Lorem ipsum'
  }
]

timeline.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { TL } from './timeline.module';
import { Timeline } from './timeline';

@Injectable()
export class TimelineService {
  getTimeline() : Promise<TL[]>{
    return Promise.resolve(Timeline);
  }
  getEvent(id: number): Observable<TL> {
    return of(Timeline.find(event => event.id === id));
  }
}

timeline.component.ts

import { Component, OnInit } from '@angular/core';

import { TL } from '../timeline.module';
import { Timeline } from '../timeline';
import { TimelineService } from '../timeline.service';

@Component({
  selector: 'app-timeline',
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css']
})
export class TimelineComponent implements OnInit {
  timeline: TL[];

  constructor(private timelineService: TimelineService) { }

  ngOnInit() {
    this.timelineService.getTimeline().then(
      timeline => this.timeline = timeline
    )
  }

}

timeline.component.html

<app-event
  *ngFor = "let event of timeline"
  [event]="event"
></app-event>

event.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { TL } from '../timeline.module';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.css']
})
export class EventComponent implements OnInit {
  @Input() event: TL[];
  constructor() { }

  ngOnInit() {
  }

}

event.component.html

<p>
  <a routerLink="/event/{{event.id}}">{{event.name}}</a>
</p>

event-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import {ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { TL } from '../timeline.module';
import { TimelineService } from '../timeline.service';

@Component({
  selector: 'app-event-detail',
  templateUrl: './event-detail.component.html',
  styleUrls: ['./event-detail.component.css']
})
export class EventDetailComponent implements OnInit {
  @Input() timeline: TL;
  constructor(
    private route: ActivatedRoute,
    private timelineService: TimelineService,
    private location: Location
  ) { }

  ngOnInit() {
    this.getEvent();
  }
  getEvent(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.timelineService.getEvent(id)
      .subscribe(timeline => this.timeline = timeline);
  }
  goBack(): void{
    this.location.back();
  }
}

event-detail.html

<p>
  {{timeline.id}}
</p>
<button class="btn btn-default" (click)="goBack()">Back</button>

 

---

Wiesz jak to zrobić?

---

Wejdźmy na priv, ok?