要在Angular 6中将JSON转换为数组并显示,您可以按照以下步骤执行:
item-list.component.html
的HTML模板文件,其中包含以下内容:
- {{ item }}
item-list.component.ts
的TypeScript文件,其中包含以下内容:import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-item-list',
templateUrl: './item-list.component.html',
styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
items: any[];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('your_api_url').subscribe(data => {
this.items = data;
});
}
}
app.module.ts
,其中包含以下内容:import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ItemListComponent } from './item-list/item-list.component';
@NgModule({
declarations: [
AppComponent,
ItemListComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
标签来显示组件。例如,假设您的应用程序模板为app.component.html
,其中包含以下内容:
现在,当您运行应用程序时,将从API获取JSON数据,并将其转换为数组并显示在列表中。请确保将your_api_url
替换为您的实际API URL。