在Angular中,ngFor是用于循环渲染元素的指令。如果在ngFor中嵌套了服务,可能会导致服务无法正常工作。
解决方法之一是使用组件输入属性来传递服务。以下是一个示例:
首先,创建一个服务:
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
getData() {
// 获取数据的逻辑
}
}
然后,在组件中使用服务:
import { Component } from '@angular/core';
import { MyService } from 'path-to-my-service';
@Component({
selector: 'app-my-component',
template: `
-
{{ item }}
`,
})
export class MyComponent {
items: any[];
constructor(private myService: MyService) {
this.items = this.myService.getData();
}
}
在上面的示例中,我们将MyService作为构造函数的参数传递给MyComponent,并在构造函数中初始化了items数组。这样,当组件初始化时,它会从MyService中获取数据并将其存储在items数组中。
这样,即使在*ngFor循环中,服务也能正常工作。