如何等待从api加载数据，然后在UI中执行其他操作？

Question

我有一个从api获取用户列表并填充列表组件的方法。现在我想做什么从api加载列表后，突出显示列表的第一个元素。我尝试了以下方法，它与setTimeout一起正常工作，但是如果没有setTimeout函数，如何使它发生呢？

这是我尝试过的代码，

public getUserList(){ 
    return this.http.get('https://jsonplaceholder.typicode.com/users').pipe(tap(x => {
      this.lists = x;
    }))
    .subscribe((data) => {
      setTimeout(() => { 
        this.clickFirstList();
      }, 1000);
    });
  }

clickFirstList() {
    Array.from(this.ulElement.nativeElement.children).forEach((element: HTMLElement, index: number) => {
      if (index === 0) {
        console.log(element);
        element.click();
      }
    });
}
这里是关于stackblitz的工作代码。 https://stackblitz.com/edit/angular-brpz2j?file=src/app/search-list.component.ts

我有一个从api获取用户列表并填充列表组件的方法。现在，我想做的是一旦从api加载列表后，突出显示列表的第一个元素。我有...

Answer 1

您可以使用以下代码

Answer 2

我将删除clickFirstList。并使用css和angular。