如何有效地将所需的值从数据库加载到角度组件？

Question

我正在寻找一种在角度分量上填充数据的方法。我必须在单个组件中加载几个下拉列表的数据。因此，最好是按需加载值或在绘制组件时首先加载它们。或者是否还有其他方法可以实现这一点，这样我就可以向用户显示渲染组件和数据的最小延迟。

提前致谢。

ngOnInit() { 
      this.loadAvalues();
      this.loadBvalues();
      this.loadCvalues();
      this.loadDvalues();
      this.loadEvalues();
      this.loadFvalues();
}

要么

触发操作时调用这些方法。

Answer 1

用于创建渲染数据的本地“缓存”;这在某种程度上取决于您要加载的数据量以及显示的数据。当你执行fetch时它是异步的，但它会在每次模型更改后重新渲染;如果这是一个问题，这些都可以用Promise.all([this.loadAValues ... ])包裹。

因为它是一个下拉列表，所以不期望任何加载时间，所以首先加载它是谨慎的。但是，没有必要立即获取数据，因此在完成任何交互后，它可以加载一点。

Answer 2

你应该在OnInit上发起呼叫。由于这些是独立调用，因此不会阻止要呈现的UI。

您可以禁用下拉列表，直到数据加载或显示一些类似于下拉列表的加载消息，一旦数据出现，然后使用实际数据呈现下拉列表。

如果您在单击下拉列表时打开它，则会向用户显示一些可能不是良好用户体验的延迟。

即使您缓存结果，第一次打开每个下拉列表时，用户也需要等待每个下拉列表的数据，但如果它们是独立的，则可能是用户打开第一个下拉列表时，可能是其他调用得到解决并填充您的数据。