javascript - 如何等待 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

Answer 1

你不应该那样操作 DOM，没有必要。我们使用 Angular 绑定(bind)，通过使用它们，我们还可以大大减少您当前拥有的代码。因此删除所有这些 DOM 操作。

首先，我们可以省略来自父级或子级的 lists 调用。现在您正在执行两次 get 请求，这实际上没有意义。我将获取请求保留在 child 中。我们也可以在OnInit中发出请求，为什么我们需要在AfterViewInit中进行？

ngOnInit() {
  this.getUserList();
}

public getUserList() {
  return this.http
     // DONT USE 'ANY', type your data using interface or class
    .get<any[]>("https://jsonplaceholder.typicode.com/users")
    .subscribe(data => {
      this.lists = data;
      // you want to emit initially the first item to parent via output
      // do it here.
      this.onClickList(0, this.lists[0] || {})
    });
 }

我们还引入了一个新变量selectedIndex，我们将根据单击的项目更改该变量。就像詹斯在他的回答中所做的那样。您希望第一个项目最初处于事件状态，我们上面将 0 作为索引传递给 onClick 函数:

public onClickList(i: number, item: any) {
  this.selectedIndex = i
  this.selectedList.emit(Object.assign({}, item));
}

我们将其添加到模板中，如下所示:

<ng-container *ngFor="let item of lists | filter: searchText; index as i">
  <li [class.active]="i === selectedIndex"
    (click)="onClickList(i, list)">
    {{ list.name }}
  </li>
</ng-container>

Your forked STACKBLITZ

正如代码中的注释所述。不要使用 any，它完全违背了 TypeScript 的目的，因此请使用接口(interface)或类来键入数据。我更喜欢界面。