Как обновить div на основе запроса http.get в Angular 2

У меня есть столбец в левой части и часть содержимого в правой части. всякий раз, когда я нажимаю на меню в левой части, выполняется запрос http.get, и я получил данные ответа, но я не знаю, как их заменить в content div. Спасибо, если кто-нибудь мне помочь ...Как обновить div на основе запроса http.get в Angular 2

компонент ц

import {Component} from 'angular2/core'; 
import {Http} from "angular2/http"; 
import {HTTPTestService} from "./http-test.service"; 
import {HTTPSecondComponent} from "./http_second.component"; 
import {Observable} from 'rxjs/Rx'; 
@Component({ 
    selector: 'http-test', 
    template: ` <div class="leftside"> 
     <ul> //left side menu iteration 
       <li *ngFor="#item of getData?.items" (click)="getPosts()"> 
         <a href="#">{{item.name}} 
       </a> 
       </li> 
     </ul> 
      //content to display ======= where i struggle to update data 
      <div *ngFor="#data of postData?.datas"> {{data.creation_date}} 
      </div> 
     </div> 
    `, 
     directives: [HTTPSecondComponent], 
    providers:[HTTPTestService], 
     styleUrls:["../src/css/http-style.css"] 
}) 
export class HTTPTestComponent { 
    public getData; 
    public postData; 
    public displayName; 
    public creationDate; 
    constructor (private _httpService: HTTPTestService){} 
    getStack() 
     { 
      this._httpService.getItemData() 
     .subscribe(    
      data =>this.getData = (data), 
       // console.log(this.httpData);}, 
      error => alert(error), 
      () =>console.log("finished") 
     ); 
    } 
    getPosts(){ 

       this._httpService.getPostData() 
     .subscribe(    
      data =>this.postData = (data), 
       // console.log(this.httpData);}, 
      error => alert(error), 
      () =>console.log("finished") 
    ); 
    } 
    ngOnInit() { 
    this.getStack(); 
    this.getPosts(); 
    } 
}

служба ц

import {Injectable} from "angular2/core"; 
import {Http} from "angular2/http"; 
import 'rxjs/add/operator/map'; 
@Injectable() 
export class HTTPTestService { 
    constructor(private _http: Http) { } 
    getItemData(){ 
     return this._http.get('https://api.stackexchange.com/2.2/sites').map(res => res.json()); 
    } 
getPostData(){ 
    return this._http.get('https://api.stackexchange.com/2.2/posts?order=desc&sort=activity&site=stackoverflow').map(res=>res.json()); 
} 
}

Получение данных для содержания, когда я нажимаю ссылку меню

{ 
    "datas": [ 
     { 
      "owner": { 
       "reputation": 3589, 
       "user_id": 1376277, 
       "user_type": "registered", 
       "accept_rate": 34, 
       "profile_image": "https://www.gravatar.com/avatar/195fcc7db00488b207c67ccfee6a2c5b?s=128&d=identicon&r=PG", 
       "display_name": "Rahul Gupta", 
       "link": "http://stackoverflow.com/users/1376277/rahul-gupta" 
      }, 
      "score": 1, 
      "last_edit_date": 1483342788, 
      "last_activity_date": 1483342788, 
      "creation_date": 1423733190, 
      "post_type": "question", 
      "post_id": 28473725, 
      "link": "http://stackoverflow.com/q/28473725" 
     } 
    ] 
}

источник

2017-01-04 suresh t

Где поле имени в массиве элементов? И можете ли вы помочь мне с трассировкой стека, если есть –

@RahulSingh имя для левого меню его работы, и я ударил по данным обновления в содержимом, которое является следующей частью в одном шаблоне (im новый в угловом). –

Вы У вас есть ngOnInit в вашем классе. Но он не будет выполнен, если он не будет реализован OnInit.

Чтобы использовать его правильно (чтобы убедиться, что он будет запущен), вы должны расширить свой класс как реализующий OnInit. Измените первую строку заголовка класса, как это:

export class HTTPTestComponent implements OnInit {

и добавить OnInit на импорт линии, как это:

import {Component, OnInit} from 'angular2/core';

и ваши функции getStack() и getPosts() будет выполняться при запуске

источник

2017-01-04 16:11:22 Roberc

Как обновить div на основе запроса http.get в Angular 2

ответ

Смежные вопросы