时间戳

首页 > 解决方案 > 如何使用角度从服务中检索 api 数据以显示在控制台上

angular - 如何使用角度从服务中检索 api 数据以显示在控制台上

问题描述

我在从 asp.net 检索数据时遇到问题。我正在尝试获取控制台上显示的所有预订餐厅预订数据。它只在控制台上显示未定义。

下面是从 asp.net 核心获取数据的服务代码

import { Booking } from './../_models/booking';

import { environment } from 'src/environments/environment';

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class BookingService {
  MainUrl = 'http://localhost:5000/api/Book/';

  constructor(private http: HttpClient) { }

  getBooks(): Observable<Booking[]> {
    return this.http.get<Booking[]>(this.MainUrl);
  }


  getBook(id): Observable<Booking> {
    return this.http.get<Booking>(this.MainUrl + id);
  }

}

下面是 app.component 文件

import { Component, OnInit } from '@angular/core';
import { BookingService } from './_services/booking.service';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  bookings: any;
  modal: any;

  constructor(private bookingService: BookingService, private http: HttpClient, private route: ActivatedRoute ) { }

  ngOnInit() {
    console.log(this.bookings);
  }

   loadBooks() {
    this.bookingService.getBooks().subscribe(data =>
      this.bookings = data);
  }

}

下面是 app.module 文件

import { BookingService } from './_services/booking.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserModule,
      HttpClientModule,
      AppRoutingModule
   ],
   providers: [BookingService],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

标签： angulartypescriptasp.net-core

解决方案

每次将组件渲染到视图时，ngOnInit() 只会触发一次。您的指示是记录预订变量，该变量在开始时是一个统一化的值。

loadBooks 方法应该在 ngOnInit() 中，否则你将永远不会使用它，因此 bookings 永远不会更新它的值。

我会将 console.log() 移到 subscribe 方法的回调中，然后将 loadBooks 放入 ngOnInit()

 ngOnInit() {
    this.loadBooks();
  }

   loadBooks() {
    this.bookingService.getBooks().subscribe(data => {
    this.bookings = data;
    console.log(bookings);
  }
      );
  }

顺便说一句，由于您的应用程序现在似乎没有将预订用于除登录之外的任何其他内容，您也可以直接将 loadBooks() 代码简化为

loadBooks() {
    this.bookingService.getBooks().subscribe(data => 
    console.log(data));
  }

推荐阅读