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

通过显示代码，然后在数据加载后隐藏齿轮，让用户知道其点击已被注册，将对您有所帮助。

有什么想法吗？

Answer 1

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

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

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

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

更新：

在更深入地研究stackblitz示例之后，当选择从数据01到另一个数据条目

时，您肯定会因为ngFor循环而遇到浏览器阻塞

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

当发生这种阻止时，就像浏览器只是锁定并在遍历大数据子集之前，不执行其他任何操作为了呈现视图。
这最终就是为什么您的齿轮没有像应该那样开始的原因。
您可能需要考虑将这些数据分成较小的子集或评估设计以确定是否可以将其完全移动到工作流的不同部分的方法。
您期望浏览器完成太多工作，并且需要找到一种方法来分散工作量。

Update2： 这是我在项目中使用的一种解决方案，可以诱骗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'>

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

1 个答案: