英文:
Angular - how can I take the data from API call and use it to populate a table?
问题
我试图使用从API调用收到的信息来填充表格。另外，当我尝试将值设置为数据时，为什么this.movies是一个空数组。
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CinemaService } from './services/cinema.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'movie-app';
data: any = [];
constructor(private cinema: CinemaService) {
this.cinema.getData().subscribe(movies => {
console.log(movies);
this.data = movies;
})
this.display(this.data);
}
display(thing: any) {
console.log(this.data);
}
}
英文:
I am trying to take the information received from API call and use it to fill the table.
Also, why is this.movies a blank array when I try and set the value equal to the data.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CinemaService } from './services/cinema.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'movie-app';
data: any = [];
constructor(private cinema: CinemaService)
{
this.cinema.getData().subscribe(movies=>{
console.log(movies)
this.data = movies;
})
this.display(this.data);
}
display(thing: any)
{
console.log(this.data);
}
}
<!-- end snippet -->
答案1
得分: 2
你正在订阅获取异步数据，然后立即调用this.display。
问题在于，在调用this.display(this.data)之前，你的订阅尚未返回数据，因此this.data将包含其初始空数组，因为订阅尚未改变内容。
这段代码应该会输出两个带有数据的日志。
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CinemaService } from './services/cinema.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'movie-app';
data: any = [];
constructor(private cinema: CinemaService) {
this.cinema.getData().subscribe(movies => {
console.log(movies);
this.data = movies;
this.display(this.data);
});
}
display(thing: any) {
console.log(this.data);
}
}
英文:
You are subscribing to get data that are asynchronos, and then calling this.display immediatly after.
The problem is that you subscription has not returned with data yet before you call this.display(this.data), this.data will contain its initial empty array since the subscription has not changed the content yet.
This code should give you two logs with data.
import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CinemaService } from './services/cinema.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = 'movie-app';
data: any = [];
constructor(private cinema: CinemaService)
{
this.cinema.getData().subscribe(movies=>{
console.log(movies);
this.data = movies;
this.display(this.data);
});
}
display(thing: any)
{
console.log(this.data);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论