[英]Display data from json array using angular4
I am new to angular so please help me. 我是新手,所以请帮助我。 I have an api returning an array of objects containing name, place id. 我有一个api返回包含名称,位置ID的对象数组。
I need to display this in different cards on my html page, the cards being a widget. 我需要在HTML页面上的不同卡片中显示此卡片,这些卡片是一个小部件。
in the parent component under the ngOnInit()
section how do I access this json data and loop through the array in order to display it on my page as different cards? 在ngOnInit()
部分下的父组件中,如何访问此json数据并遍历数组,以便将其作为不同的卡片显示在我的页面上?
Thank you in advance. 先感谢您。
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);
}
}
This will get you the events you want. 这将为您提供所需的事件。
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();
}
}
You will have to implement a Child Component( EventComponent
probably with the selector app-event
) that will accept an event object as an @Input
property. 您将必须实现一个子组件( EventComponent
可能带有选择器app-event
),该子组件将事件对象接受为@Input
属性。 Then in your HomePageComponent
Template, you can loop through the events like this: 然后,在HomePageComponent
模板中,您可以遍历以下事件:
<div *ngFor="let event of events">
<app-event [event]="event"></app-event>
</div>
Alternatively : 或者 :
You can use the async
pipe in your HomePageComponent
's Template to avoid manually unsubscribing from the Observable Subscription. 您可以在HomePageComponent
的模板中使用async
管道,以避免手动取消订阅Observable Subscription。 Your HomePageComponent
Class code will change to: 您的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");
}
}
And then in HomePageComponent's Template: 然后在HomePageComponent的模板中:
<div *ngFor="let event of events$ | async">
<app-event [event]="event"></app-event>
</div>
Here's how your EventComponent
would look like in this case: 在这种情况下,您的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");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.