ngFor JSON 异步等待对象数组 angular 13 未绑定

Question

这是我的 typescript 页面。

export class ListUsersComponent implements OnInit {
  users: any;
  constructor(){}

  async ngOnInit() {
    await this.loadUser();
  }

  async loadUser() {
      const us = this.userService.getUsers().pipe(
       first(),
      catchError((errorMessage) => {
        return of(EMPTY_UserProfile);
      })
).subscribe((data: any) => {
  this.users = data;
  console.log(this.users);
});
this.subscriptions.push(us);
  }
}

由于 this.user 很容易绑定，它给我的结果是

[
  {
    "id": 1,
    "userName": "xyz",
  },
  {
    "id": 2,
    "userName": "xyz2",
  }
]

这里是 HTML ngFor.

<tr align="center" *ngFor="let user of users | async; let i=index">
     <td>{{user.id}}</td>
     <td>{{user.userName}} </td>
</tr>

没有显示输出，因为我尝试了通过文章找到的所有可能方法。当我尝试在 构造函数 中调用固定的 Array JSON 对象 但调用 async await 在 ngOnInit 中并没有真正帮助我。我可能遗漏了什么？

更新 1：

这是调用服务的可观察部分。

    getUsers(id?: string): Observable<UserDetails> {
    const auth = this.getAuthFromLocalStorage();
    if (!auth || !auth.authToken) {
      return of(undefined);
    }

    this.isLoadingSubject.next(true);
    return this.userHttpService.getUsers(auth.authToken, '').pipe(
      map((user: UserDetails) => {
        if (user) {
          this.currentUsers = new BehaviorSubject<UserDetails>(user);
        } else {
          this.logout();
        }
        return user;
      }),
      finalize(() => this.isLoadingSubject.next(false))
    );
  }

更新二： 这从更新 1 调用为 this.userHttpService.getUsers(auth.authToken, '')

getUsers(token, Id?: string): Observable<UserDetails> {
    const httpHeaders = new HttpHeaders({
      Authorization: `Bearer ${token}`,
    });
    return this.http.get<UserDetails>(`${API_URL}/GetCompanyUsers?Id=` + Id + `&pageNumber=1` + `&pageSize=1`, {
      headers: httpHeaders,
    });
  }

Answer 1

这里有几件事。

GRD在评论中也说过，这里不需要添加async await。
您已经订阅，因此无需使用异步管道。

注意：如果您直接使用 observable，则使用异步管道。

  users: any[] = [];
  constructor(){}

  ngOnInit() {
    this.loadUser();
  }

  loadUser() {
      const sb = this.userService.getUsers().pipe(
       first(),
       catchError((errorMessage) => {
        return of(EMPTY_UserProfile);
       })
      ).subscribe((users: UserProfile[]) => {
      this.users = users; //data is recieved but not shown on ngFor HTML page
    });
    this.subscriptions.push(sb);
  }
}

<tr align="center" *ngFor="let user of users; let i=index">
     <td>{{user.id}}</td>
     <td>{{user.userName}} </td>
</tr>

Answer 2

正如 async 管道定义所述

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted.

你需要应用 async 管道，如果你要绑定到一个可观察对象，在你的情况下 loadUser()您正在订阅一个可观察对象的方法，因此不需要使用 async 管道。

如果你想应用async管道，那么修改loadUser方法这样

  loadUser():Observable<any[]> {
  const sb = this.userService.getUserProfile().pipe(
   first(),
   catchError((errorMessage) => {
    return of(EMPTY_UserProfile);
   })
  );
this.subscriptions.push(sb);
return sb;
 }

然后你必须像这样修改 *ngFor

<tr align="center" *ngFor="let user of loadUser() | async; let i=index">
 <td>{{user.id}}</td>
 <td>{{user.userName}} </td>
</tr>

ngFor JSON 异步等待对象数组 angular 13 未绑定

ngFor JSON array of object async await angular 13 not binding

angular

typescript

angular13