以下是一个示例,它使用Angular框架从TMDB API获取电影数据并显示字段:
首先,确保你已经安装了Angular CLI,并创建了一个新的Angular项目。
创建一个新的组件,例如MovieListComponent:
ng generate component movie-list
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-movie-list',
templateUrl: './movie-list.component.html',
styleUrls: ['./movie-list.component.css']
})
export class MovieListComponent implements OnInit {
movies: any[] = [];
constructor(private http: HttpClient) { }
ngOnInit() {
// 发送GET请求到TMDB API获取电影数据
this.http.get('https://api.themoviedb.org/3/movie/popular?api_key=YOUR_API_KEY')
.subscribe(data => {
this.movies = data.results;
});
}
}
{{ movie.title }}
{{ movie.overview }}
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
MovieListComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ng serve
现在,当你运行应用程序时,它将从TMDB API获取热门电影数据,并显示电影的标题、概述和海报图像。请确保将YOUR_API_KEY替换为你自己的TMDB API密钥。