自动完成第一次渲染需要时间答案

【问题标题】：autocomplete taking time to render for first time自动完成第一次渲染需要时间
【发布时间】：2021-09-16 11:03:19
【问题描述】：

我有一个输入字段，我正在通过 bing api 搜索位置。

this.addressForm
  .get('queryField')
  .valueChanges.debounceTime(100)
  .distinctUntilChanged()
  .switchMap(query => this.onChangeSearch(query))
  .subscribe(res => {
    console.log(res);
  });

注意：

当我们加载应用程序时，第一次当我在字段中仅输入 1 个字符 时，需要几秒钟来呈现视图。 API 响应正常，但列表会在几秒钟后填充。

从第二次开始就不会发生这种情况了。

【问题讨论】：

标签： javascript angular autocomplete bing-api

【解决方案1】：

变更检测 - 这是分叉：https://stackblitz.com/edit/angular-ng-autocomplete-7ryhdv?file=src%2Fapp%2Fapp.component.ts

这些是行：

  constructor(
    private bingApiLoader: BingApiLoaderService,
    private fg: FormBuilder,
    private ref: ChangeDetectorRef <- ADD THIS
  ) {}

...

    this.manager.getSuggestions(search, res => {
      this.countries = res.map(r => {
        return {
          formattedSuggestion: r.formattedSuggestion,
          address: r.address
        };
      });
      this.results = this.countries;
      this.ref.detectChanges(); <- AND THIS
    });

实际上，您应该对所有事物使用可观察对象（而不是实例成员），并且您的模板应该只是订阅它们。

这是我的意思的一个例子。 https://stackblitz.com/edit/angular-ivy-k47m7k

它使用了我很久以前写的一个包（忽略包本身），但只需注意没有实例成员，模板所做的只是使用async pipe 订阅 observables。

我见过很多经验丰富的 Angular 开发人员完全按照 OP 关于有状态组件*所做的事情 - 只需创建一些实例成员，当他们觉得必须这样做时调用 detectChanges() .但实际上，当您处理有状态组件时，您的模板应该只是订阅 observables。

*有状态组件是一个创建了某种数据并将传递给子组件的组件。

【讨论】：

感谢亚当！这行得通，这是因为代码没有在角度区域中运行。我不明白的是为什么它需要一点渲染......
它不会渲染一下。它根本不知道它需要渲染。下次您击键时，它会运行更改检测并了解上次的更改并呈现它们。如果我没记错的话，你的原始代码实际上总是在它应该在的位置后面渲染一个。
创建新对象不起作用吗？而不是 changeDetection？
@ShankarGuru 是正确的。有时人们会误解并认为这就是它的工作原理，因为他们创建的新对象发生在更改检测周期运行之前，因此它“看起来”正确（对您而言并非如此）。模板中的一切都是可观察的异步管道，让数据在您的应用程序中轻松流畅地流动，使其非常可测试，而且您不必做一堆 changeDetection hack。