angular - 等待来自服务器的数据，然后以角度执行函数、异步和同步代码

Question

我在等待来自服务器的数据时遇到问题，我想等到变量 myData 获取数据然后执行 return 语句，以便组件在 checkMyData 中获取更新的新数据，我在 console.log（“新数据” ， 一些数据）。

更新了代码

//service methods
getBooks():any{
 const myData = null;
 this.httpClient.get(url).subscribe(
  data=>myData = data,
  error=>myData = error
 );
 return checkMyData(mydata); 
}  

checkMyData(someData){
 //some code here
 //maybe modifying someData
 return someData;
}

//components methods

const booksList;
getBooksFromService(){
 this.service.getBooks().subscribe(
    data => booksList = data,
    error => booksList = error
 );
}

Answer 1

只需调用您正在进入该方法map的那个：ObservablegetBooks

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable()
export class BookService {

  constructor(
    private httpClient: HttpClient
  ) { }

  getBooks(): any {
    let myData = null;
    const url = 'https://jsonplaceholder.typicode.com/users';
    return this.httpClient.get(url)
      .pipe(
        map((res: any[]) => this.checkMyData(res))
      );
  }

  checkMyData(someData: any[]) {
    //some code here
    console.log('In Check My Data: ', someData);
    //maybe modifying someData
    someData = someData.map(book => book.name);
    return someData;
  }

}

然后你可以像这样在你的组件中调用它：

import { Component } from '@angular/core';
import { BookService } from './book.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private bookService: BookService) {}
  ngOnInit() {
    this.bookService.getBooks()
      .subscribe(books => console.log('Got the books as : ', books));
  }  
}

---

这是您参考的工作示例 StackBlitz。