Отображение данных из массива JSON с помощью Angular4 - PullRequest
Новая
       9

Отображение данных из массива JSON с помощью Angular4

0 голосов
/ 19 сентября 2018

Я новичок в угловой, поэтому, пожалуйста, помогите мне.У меня есть API, возвращающий массив объектов, содержащих имя, идентификатор места.

Мне нужно отобразить это в разных карточках на моей html-странице, карточки являются виджетом.

в родительском компоненте в разделе ngOnInit(), как получить доступ к данным и циклу jsonчерез массив для того, чтобы отобразить его на моей странице как разные карточки?

Заранее спасибо. 

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs/observable';

@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {

  showSplash = true
 //public events: any = [];
  events = [];

  constructor(private http : HttpClient) { }

  ngOnInit() {
     this.showSplash = true
     this.http.get("/events").subscribe(data => {
     console.log("EVENTS ARE: ", data);
     this.events = data;
     console.log(this.events)
     })
   }

  ngAfterViewInit(){
    setTimeout(() => {
     this.showSplash = false
  }, 3000);
  }

 }

1 Ответ

0 голосов
/ 19 сентября 2018

Это даст вам нужные вам события. 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit, OnDestroy {

  showSplash = true
  events = [];
  subscription: Subscription;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.subscription = this.http.get("/events").subscribe(data => {
      this.events = data;
      this.showSplash = false;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

Вам нужно будет реализовать дочерний компонент (EventComponent, вероятно, с селектором app-event), который будет принимать объект события как @Input собственность.Затем в вашем шаблоне HomePageComponent вы можете циклически проходить через такие события: 

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

В качестве альтернативы :

Вы можете использовать канал async в вашемШаблон HomePageComponent, чтобы вручную отказаться от подписки на подписку.Ваш HomePageComponent код класса изменится на: 

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

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {

  events$;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.events$ = this.http.get("/events");
  }

}

А затем в шаблоне HomePageComponent: 

<div *ngFor="let event of events$ | async">
  <app-event [event]="event"></app-event>
</div>

Вот как будет выглядеть EventComponent в этом случае: 

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

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

  @Input() event;

  ngOnChanges() {
    this.events$ = this.http.get("/events");
  }

}
...