要在Angular 8中使用*ngFor显示来自API的数据,你需要进行以下步骤:
public apiData: any[];
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ApiService {
constructor(private http: HttpClient) {}
public getData() {
return this.http.get('your_api_url');
}
}
import { Component, OnInit } from '@angular/core';
import { ApiService } from 'your_api_service_path';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnInit {
public apiData: any[];
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.getData().subscribe(data => {
this.apiData = data;
});
}
}
- {{ item.property }}
在上面的代码中,apiData
是你从API获取的数据数组,item.property
是你要显示的数据的属性。
确保在你的模块中正确引入和提供你的服务:
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ApiService } from 'your_api_service_path';
@NgModule({
imports: [HttpClientModule],
providers: [ApiService]
})
export class YourModule { }
这些步骤将使你能够使用*ngFor在Angular 8中显示来自API的数据。