下面是一个使用Angular和TypeScript从数组服务获取数据的示例解决方案:
data.service.ts
的服务文件,该文件将提供从数组获取数据的方法。import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: any[] = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Mike' }
];
constructor() { }
getData() {
return this.data;
}
}
data.component.ts
的组件文件,该文件将在组件中使用数据服务来获取数据。import { Component, OnInit } from '@angular/core';
import { DataService } from 'path-to-data.service';
@Component({
selector: 'app-data',
templateUrl: './data.component.html',
styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
data: any[];
constructor(private dataService: DataService) { }
ngOnInit() {
this.getData();
}
getData() {
this.data = this.dataService.getData();
}
}
data.component.html
的组件模板文件,用于显示从数据服务获取的数据。
-
{{ item.id }} - {{ item.name }}
DataService
和DataComponent
。import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataService } from 'path-to-data.service';
import { DataComponent } from 'path-to-data.component';
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, DataComponent],
providers: [DataService],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,当DataComponent
组件被加载时,它将使用DataService
来获取数据,并在页面上显示出来。