Question

我正在尝试从将JSON输出提供给Angular项目的URL中获取数据。

当我在浏览器上关注http://localhost:3000/booking时，它会显示以下输出

[{"_id":"5cf35bbebaa52f4ab2f27b81","firstname":"lahiru","lastname":"madushan","email":"lahiru@lahiru.com","contact":770095174,"comments":"Done","xl":2,"md":1,"sm":3,"store":null,"pickup":null,"store_id":"df4xrttfvy","__v":0},
 {"_id":"5cf3762e7410e55137b65c4e","firstname":"lahiru","lastname":"madushan","email":"lahiru@lahiru.com","contact":770095174,"comments":"Done","xl":2,"md":1,"sm":10,"store":null,"pickup":null,"store_id":"df4xrttfvy","__v":0}
]

但是，当我尝试使用角度服务获取并将其存储在本地存储中时。但是当我检查LocalStorage数据不存在时。

这是 service.ts 文件

  getBookings(): Observable<Booking[]>{
    return this.http.get<Booking[]>('http://localhost:3000/booking/');
  }

和 component.ts 文件

  ngOnInit() {
    this.bookingService.getBookings()
    .subscribe(data => this.bookings = data);

    localStorage.setItem('bookings', JSON.stringify(this.bookings));
  }

这不会在控制台中显示任何错误。

请告诉我我做错了什么。

Answer 1

请以这种方式更改您的ngOnInit() [即，将localStorage.setItem('bookings', JSON.stringify(this.bookings));移到subscribe（）内]-

ngOnInit() {
    this.bookingService.getBookings()
    .subscribe(data => {
          this.bookings = data;
          localStorage.setItem('bookings', JSON.stringify(this.bookings));
     });
  }

您正在尝试通过订阅回调填充this.bookings。

Answer 2

订阅中是否有任何数据？尝试在内部进行console.log（data）检查来自后端的内容。

还请检查是否在提供程序数组的app.module中导入了服务。

Answer 3

添加到答案中，如果您希望数据在订阅框外，则必须等待数据，例如，尝试以下代码，

ngOnInit() {
    this.bookingService.getBookings()
    .subscribe(data => {
          this.bookings = data;
     });
setTimeout(() => {
  localStorage.setItem('bookings', JSON.stringify(this.bookings));
},1000);
  }

但这不是我们可以使用promise或async / await来实现Async方式的异步方式。让我知道是否可以讨论。

从Angular上的GET请求获取数据

3 个答案: