无法在 ngOnInit() 中为变量赋值答案

【问题标题】：Can't assign value to variable in ngOnInit()无法在 ngOnInit() 中为变量赋值
【发布时间】：2020-10-11 09:22:15
【问题描述】：

我在 ngOnInit() 中调用了 api，我想在 ngOnInit() 中对来自 api 的数据做更多的事情。

但是当我尝试 console.log() 时，我的数据未定义，无法处理更多。当我从服务订阅数据时，console.log() 在 getUsers() 方法中使用相同的数据时，我的数组包含 json 数据。 API 响应：

{"items":[{"id":"1","name":"Adam","age":20},{"id":"2","name":"Cris","age":32}]}

UserResults 是我的整个 JSON。而且我只需要用户数组中的用户而不是项目。

service.ts

public getUsers(): Observable<UserResults> {
    return this.httpClient.get<UserResults>(baseURL);
  }

组件.ts

export class SidebarComponent implements OnInit {
  usersResult: UserResults;
  users: Users[];


  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.getUsers();
    // shouldn't be users array available ???
    console.log(this.getUsers()) // undefined
    ///more calculations
  }

  private getUsers() {
    this.dataService.getUsers().subscribe(
      data => {
        this.users = data.items;
    console.log(this.getUsers()) // correct data in json array
      }
    )
  }
}

我应该如何最好地处理它？

【问题讨论】：

我可以知道你为什么想要关于 ngOninit 的数据吗？
当我进入我的网站时我需要数据并且我在那里进行第一次 api 调用，我也需要对数据进行一些操作。我应该使用其他钩子吗？
你可以在你的服务中使用行为主体。

标签： angular typescript

【解决方案1】：

您正在尝试 console.log 您的方法，该方法不返回任何内容并且是异步的，而不是返回的数据。

如果您确实需要 ngOnInit 中的数据，则需要在其中订阅您的 Observable，而不是在单独的私有方法中。

请注意，这通常不是处理从 HTTP 请求返回的数据的最佳方式。根据数据的使用方式，您通常希望在 TypeScript 代码中创建 Observable，并尽可能在模板中使用 async 管道订阅它。例如：

component.ts:

this.users$ = this.dataService.getUsers().pipe(
  map(data => data.items) // this is now an Observable<User[]>
);

component.html:

<div class="user-pane" *ngFor="let user of (users$ | async)">

不要忘记异步的东西需要时间。您不能在一行中调用异步方法，然后在下一行中使用结果。

【讨论】：