<mat-spinner *ngIf="loading === true"
             class="tableLoading"></mat-spinner>
<div *ngIf="loading === false">
...
</div>

因此,由于某些原因,与没有条件相比,微调工具需要的时间大约是没有条件的5-8倍,但从我的.ts中的文件中读取数据需要相同的时间.

tableDataSource: MatTableDataSource<randomInterface> = new MatTableDataSource<randomInterface>();
loading: boolean = true;

constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get('assets/abc.json').subscribe((res) => {
    this.tableDataSource = new MatTableDataSource<randomInterface>(res as randomInterface[]);
    this.loading = false;
  })
}

由于数据是一个3MB~.json文件,我可以理解为什么它需要8秒~来加载,并且没有html中的*ngIf它正常完成,但是当我将加载器返回到*ngIf时,突然旋转控件停留在那里45秒+?我完全搞不懂为什么会发生这种事.

推荐答案

如果您使用此方法,则呈现内容将需要时间,而不是使用覆盖类型的解决方案,其html将为

<div>
    <mat-spinner [hidden]="!loading" class="tableLoading"></mat-spinner>
    ...
</div>

如果需要隐藏网格,您还可以在网格上添加hidden,如果需要,您也可以使用相反的条件将hidden添加到网格!

这种方法的优点是没有任何内容的重新渲染,您可以随时显示/隐藏微调,而且3MB很大,try 虚拟滚动/分页解决方案,以获得快速的用户体验!

Javascript相关问答推荐

react 路由加载程序行为

如何使用Echart 5.5.0创建箱形图

如何修复循环HTML元素附加函数中的问题?

微软Edge Select 间隙鼠标退出问题

如何在不创建新键的情况下动态更改 map 中的项目?

MathJax可以导入本地HTML文档使用的JS文件吗?

手机上的渲染错误文本必须在文本组件中渲染,但在浏览器上没有问题<><>

如何在JavaScript文件中使用Json文件

如何解决useState错误—setSelect Image不是函数''

使用POST请求时,Req.Body为空

是什么导致了这种奇怪的水平间距错误(?)当通过JavaScript将列表项元素追加到无序列表时,是否在按钮之间?

如何在HTMX提示符中设置默认值?

Docent.cloneNode(TRUE)不克隆用户输入

FileReader()不能处理Firefox和GiB文件

在渲染turbo流之后滚动到元素

MongoDB中的嵌套搜索

JavaScript将字符串数字转换为整数

我在哪里添加过滤器值到这个函数?

ReactJS在类组件中更新上下文

找不到处于状态的联系人