要在*ngFor加载数据之前显示加载器,您可以使用一个变量来跟踪加载状态,并在加载完成后将其设置为false。您可以使用ngIf指令根据加载状态显示加载器或数据。以下是一个示例解决方案:
loading: boolean = true;
getData() {
// Simulating data loading
setTimeout(() => {
this.loading = false;
}, 2000);
}
Loading...
- {{ item }}
完整的组件代码示例:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
Loading...
- {{ item }}
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
loading: boolean = true;
items: string[] = [];
ngOnInit() {
this.getData();
}
getData() {
// Simulating data loading
setTimeout(() => {
this.items = ['Item 1', 'Item 2', 'Item 3'];
this.loading = false;
}, 2000);
}
}
在这个示例中,当组件初始化时,会调用getData()方法来模拟数据加载。在数据加载完成后,加载状态将设置为false,加载器将被隐藏并显示数据。