要从服务方法调用一个数组到主组件中,你可以使用Angular的Observable和订阅模式来实现。
首先,创建一个服务文件,例如data.service.ts
,并在其中定义一个返回Observable的方法,如下所示:
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private data: string[] = ['Item 1', 'Item 2', 'Item 3'];
getData(): Observable {
return of(this.data);
}
}
然后,在你的主组件中,导入并注入这个服务,并在ngOnInit
生命周期钩子中订阅数据,如下所示:
import { Component, OnInit } from '@angular/core';
import { DataService } from '路径/data.service';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
data: string[] = [];
constructor(private dataService: DataService) {}
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.data = data;
});
}
}
最后,在你的主组件的模板文件中,使用ngFor
指令来循环遍历数据数组并显示每个项目,如下所示:
- {{ item }}
这样,当主组件初始化时,它会调用getData()
方法并订阅返回的Observable,一旦数据可用,它就会被赋值给主组件的data
属性,并在模板中循环遍历显示出来。