Как эффективно загрузить необходимые значения из базы данных в угловой компонент?

Question

Я ищу способ заполнения данных по угловому компоненту.Я должен загрузить данные для нескольких выпадающих в одном компоненте.Так что лучше загружать значения по требованию или загружать их сначала при рисовании компонента.Или есть какой-то другой способ добиться этого, чтобы я мог показать пользователю минимальную задержку рендеринга компонентов и данных.

Заранее спасибо.

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

или

Вызовите эти методы при запуске действия.

Answer 1

Вы должны запускать звонки на OnInit.Поскольку это независимые вызовы, он не будет блокировать пользовательский интерфейс для рендеринга.

Вы можете отключить раскрывающийся список до загрузки данных или показать какое-либо сообщение о загрузке , похожее на раскрывающийся списоки как только данные поступают, визуализируйте раскрывающийся список с фактическими данными.

Если вы откроете его, щелкнув раскрывающийся список, он покажет пользователю некоторую задержку, которая может быть неприемлемой для пользователя.

Даже если вы кешируете результат, в первый раз, когда вы открываете каждый раскрывающийся список, пользователь должен ждать данные для каждого раскрывающегося списка, но если они независимы, есть вероятность, что когда пользователь откроет первый раскрывающийся список, в это время могут быть получены другие вызовы.разрешены и ваши данные заполнены.

Answer 2

Для создания локального «кэша» данных рендеринга; это в некоторой степени зависит от того, сколько данных вы загружаете и как оно отображается. Когда вы делаете fetch, это асинхронно, но он будет перерисовываться после каждого изменения модели; если это проблема, все они могут быть заключены в Promise.all([this.loadAValues ... ]).

Поскольку это выпадающий список, он не ожидает никакого времени загрузки, поэтому разумно сначала его загрузить. Однако не обязательно иметь данные, чтобы они могли немного загружаться после того, как вы закончили рендеринг любых взаимодействий.