在Angular中,可以使用*ngIf
指令结合loading标志来控制页面加载的时机。下面是一个示例代码:
component.ts:
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path/to/data.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
data: any; // 存储从服务获取的数据
loading: boolean = true; // 控制页面加载的标志
constructor(private dataService: DataService) { }
ngOnInit() {
this.getData();
}
getData() {
this.dataService.getData().subscribe(response => {
this.data = response;
this.loading = false; // 数据加载完成后,将loading标志设置为false
});
}
}
component.html:
Loading...
-
{{ item }}
在上面的示例中,loading
变量初始值为true
,所以页面一开始会显示"Loading..."。当数据加载完成后,loading
变量会被设置为false
,然后数据会显示在页面上。
请注意,上述示例中使用了DataService
来获取数据。你可以根据自己的需求使用适当的服务来获取数据。
下一篇:Angular仪表板网格