Angular 6中的下拉选择启动微调器

Question

我有以下代码：

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() 方法中。

在获取代码以让用户知道他们的点击已被注册（通过显示 cogs，然后在加载数据后隐藏 cogs）方面提供任何帮助。

有什么想法吗？

Answer 1

您的代码有效，只是在 UI 调用 startCog() 之前设置了 this.loading = false。

• 如果您将控制台日志放在 this.loading = false 上方并在选择下拉菜单时观察控制台，您将看到我所指的计时问题。

如果您将 this.loading = false 包装在 setTimeout 中 2 秒，则 cogs 将消失...通常您会在 API 调用或其他机制的响应中将此设置为 false，在这种情况下，这个 setTimeout 将不是必需的，它只是模拟 API 的延迟。

console.log('setting false')
setTimeout(()=>this.loading = false,2000); 

更新：

在玩了你的 stackblitz 示例之后，你肯定会因为这个 ngFor 循环而在选择 From Data 01 To Another Data Entry 时遇到浏览器阻塞

<div *ngFor='let panelLayout of sourceDestinationParametersValuesData'>

• 当发生这样的阻塞时，就像浏览器只是锁定和 在遍历大数据子集之前什么都不做 为了渲染视图。
• 这最终就是为什么您的齿轮没有按应有的方式启动。
• 您可能需要考虑如何将这些数据拆分为更小的子集，或者评估设计以确定是否可以将其完全移至工作流的不同部分。
• 您期望浏览器做太多事情，需要找到一种方法来分散工作负载。

更新 2： 这是我在我的项目中使用的一个解决方案，用于欺骗 DOM，使其仅在用户单击元素时迭代那些大型数据子集。

• 这会使微调器按您希望的方式工作......但是
• 现在这会减慢垫子扩展面板的扩展速度，而这正是问题所在。

HTML 代码更改

<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'>