我有以下代码：
https://stackblitz.com/edit/angular-6wtyrh
我试图弹出一个微调器来通知用户数据正在加载。 我运气不好。 我在示例中加载了大量数据，以便可以看到数据填充字段需要多长时间。 您所要做的就是单击一个选择(更有可能是底部)，然后看到页面响应需要一些时间。 可以做些什么来启动微调器。
微调器由 *ngIf 触发和隐藏。 我尝试在<mat-select>甚至<mat-option>元素中触发启动器。
<mat-select panelClass='element-selection-width' #elementSelection='ngModel' #selectDropdown [ngModel]='elementSelectionListngModel' placeholder='Select an Existing Element ({{elementSelectionList.length}})' (selectionChange)='startCog()' (ngModelChange)='onChange($event)'>
或
<mat-option *ngFor='let element of elementSelectionList' [value]='element.id' (click)='startCog()'>
它似乎直到数据已经加载到字段中，它才会消失，并且在数据加载到带有语句的字段中之后，它甚至不会关闭齿轮：
this.loading = false; // used to hide cogs
在已编写的用于加载数据的onChange()方法中。
任何帮助都将不胜感激，以获取代码，让用户知道他们的点击已被注册，通过显示齿轮，然后在加载数据后隐藏齿轮。
有什么想法吗？
你的代码可以工作，只是在 UI 调用startCog()之前设置了this.load = false。
- 如果您在此之上放置控制台日志.load = false，并在选择下拉列表时查看控制台，您将看到我所指的计时问题。
如果你把你的 this.load = false包装在一个 setTimeout 中 2 秒，齿轮会消失......通常，您会在来自 API 调用或其他机制的响应上设置此 false，在这种情况下，此 setTimeout 不是必需的，仅模拟 API 的延迟。
console.log('setting false')
setTimeout(()=>this.loading = false,2000);
更新：
在进一步尝试了堆栈闪电战示例之后，您肯定会遇到浏览器阻塞，因为在选择"从数据 01 到另一个数据输入"时，由于此 ngFor 循环
<div *ngFor='let panelLayout of sourceDestinationParametersValuesData'>
- 当发生这样的阻塞时，就像浏览器只是锁定和 在循环访问大型数据子集之前不执行任何其他操作 为了呈现视图。
- 这最终就是为什么你的齿轮没有像他们应该的那样开始。
- 您可能需要考虑如何将此数据拆分为较小的子集，或者评估设计以确定是否可以将其完全移动到工作流的不同部分。
- 您期望浏览器执行太多操作，并且需要找到一种方法来分散工作负载。
Update2：这是我在项目中使用的解决方案，用于诱使 DOM 在用户单击元素时仅迭代那些大型数据子集。
- 这使得微调器按照您想要的方式工作...然而
- 现在，这减慢了垫子扩展面板的扩展速度，而这正是问题所在。
网页代码更改
<div *ngFor='let panelLayout of sourceDestinationParametersValuesData; let i = index'>
<mat-expansion-panel #i id='panelLayout.panelId' class='expansionPanel'>
<mat-expansion-panel-header class='expansionHeader'>
{{panelLayout.title}}
</mat-expansion-panel-header>
<div *ngIf="i.expanded" class='expansion-panel-content'>