Angular 2 Dersleri | 16 Asenkron veri Çekmek ( toPromise)
Bu makalemizde sizlere Asenkron işlemden bahsedeceğim. Bir tane Json verisini alarak oradan gelen verileri ekrana yazdıracağız. Bunun için İlk defa izleyenler için daha önceki derslerimize göz atmanızda fayda var.
İlk olarak
team.service.ts adında daha önce bir dosya oluşturmuştuk buna ilaven bu dersimizde. Aşağıdai kısımları sayfamızın en üst kısmına import ediyoruz.
|
1 2 3 |
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import {DataPost} from '../../datamodel' |
Bunun ilk ikisi asenkron için gerekli ve sonuncusu ise çekeceğimiz data için oluşturduğumuz datamodel bu dosyamızın en üst kısmı aşağıdaki gibi olmalıdır.
|
1 2 3 4 5 6 |
import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import {Observable} from 'rxjs/Rx'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; import {DataPost} from '../../datamodel' |
Aşağıdaki kısımı da ekleyerek getPost Methotumuzu oluşturmuş oluyoruz. Bu methot da gelen veriyi constructr da tanımlamış olduğumuz http modülünün get fonksiyonu ile alarak “map” ile json verisine dönüştürüyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@Injectable() export class TeamService { private dataUrl="http://jsonplaceholder.typicode.com/users"; constructor(private http:Http){ } getPost():Promise<DataPost[]>{ return this.http.get(this.dataUrl) .map(res=>res.json()) .toPromise(); } } |
datamode.ts
Data modelimiz çektiğiniz verilere göre değişebilir.
|
1 2 3 4 5 6 7 |
export class DataPost{ id:number; name:string; username:string; email:string; address:string; } |
izleveogren.component.html
son olarak izleveogren.component.ts
Burada verileri alarak html içinde ngFor yardımı ile dönüyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { Component, OnInit } from '@angular/core'; import {TeamService} from '../Service/angularService/team.service'; import {DataPost} from './../datamodel'; @Component({ selector: 'app-izleveogren', templateUrl: './izleveogren.component.html', styleUrls: ['./izleveogren.component.css'] }) export class IzleveogrenComponent implements OnInit { title="İzle ve Öğren yeni"; subTitle="youtube.com/izleogrenvepaylas - yeni"; post:DataPost; userInfo; constructor(productsService:TeamService){ productsService.getPost() .then(posts=>{ this.userInfo=posts.map(post=>post) }) } ngOnInit() { } } |
Daha fazla detay için :
https://angular.io/docs/ts/latest/guide/ngmodule.html#!#lazy-load
