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

Tap 还接受一个对象映射来记录下一个、错误和完成

  public getUserList(){ 
    return this.http.get('https://jsonplaceholder.typicode.com/users')
    .pipe(
       tap( {
         next: x => {
           console.log('on next', x);
         },
         error: error => {
           console.log('on error', error.message);
         },
         complete: () => {
           console.log('on complete')
           this.clickFirstList()
         }
       }))
       .subscribe((x) => {
        console.log(x)
       });
  }

Answer 2

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

首先，我们可以忽略来自父母或孩子的lists 调用。现在您正在执行两次 get 请求，这实际上没有任何意义。我将获取请求保留在孩子身上。我们也可以在 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，我们将根据点击的项目进行更改。就像 Jens 在他的回答中所做的那样。您希望第一个项目最初处于活动状态，我们将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 的目的，因此请使用接口或类来输入您的数据。我更喜欢接口。

Answer 3

您可以使用以下代码

public getUserList(){ 
    return this.http.get('https://jsonplaceholder.typicode.com/users').pipe(tap(x => {
      this.lists = x;
    }))
    .subscribe((data) => {
    },
    (err) => {
        // code to execute if request fails
    },
    () => {
    this.clickFirstList();
    }
  });
}

Answer 4

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

我现在不知道你在哪个 html 元素上循环，但可以说它是一个列表 例如：html

<ul>
  <li *ngFor="let user of list:let index = index" [class.selected]="index===selectedIndex" (click)="onClick(index)> 
    {{user.Name}}
  </li>
</ul>

和css

.selected{
   background-color: yellow;
}

在打字稿组件中：

selectedIndex = 0; //Default value. 
onClick(index:number){
   this.selectedIndex=index;
}