Question

我正在尝试在有角度的前端上显示来自本地localhost Express服务器的结果。我的html没有任何结果，并试图找出原因？

在localhost：3000 / yelp上，我看到了我的结果，为了节省空间，我只会发布前几行：

{“企业”：[{“ id”：“ YzUVUMzeiMVeufW2eOC0FQ”，“别名”：“ howdy-homemade-ice-cream-dallas”，“ name”：“ Howdy Domestic Ice Cream”，“ image_url”：“ https://s3-media3.fl.yelpcdn.com/bphoto/S21rwytsz7y6pMBt9V82ig/o.jpg”，“ is_closed”：否，“ url”：“ https://www.yelp.com/biz/howdy-homemade-ice-cream-dallas?adjust_creative=FLKfJRyWD2HUQxXlozzc5A&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=FLKfJRyWD2HUQxXlozzc5A”，“ review_count”：153，“类别”：[{“别名”：“甜点”，“标题”：“甜点”}，{“别名”：“冰淇淋”，“标题”：“冰淇淋和冷冻酸奶”}]，“评分”：4.5，“坐标”：{“纬度”：32.8509351，“经度”：-96.8095341 }，“ transactions”：[]，“ price”：“ $”，“ location”：{“ address1”：“ 4333 Lovers Ln”，“ address2”：“”，“ address3”：“”，“ city”： “达拉斯”，“邮政编码”：“ 75225”，“国家”：“美国”，“州”：“ TX”，“ display_address”：[“ 4333 Lovers Ln”，“达拉斯，TX 75225”]}，“电话“：” +14699308494“，” display_phone“：”（469）930-8494“，”距离“：1555.5657355032201}，{” id“：” KP0pkPt74B1jPZFyAXcrZQ“，” alias“：”牛奶和奶油达拉斯2 ”，“名称”：“牛奶和奶油”，“ image_url”：“ https://s3-media1.fl.yelpcdn.com/bphoto/1bUcZ7uATp7gKjsXA7hHkQ/o.jpg”，“ is_closed”：false，“ url”：“ https://www.yelp.com/biz/milk-and-cream-dallas-2?adjust_creative

我的 list.model.ts 为

    export interface List {
    id: string;
    name?: string;
    rating?: number;
    review_count?: number;
    url?: string;
    location: string;
    display_name?: string;
    image_url?: string;
    is_closed?: boolean;
}

我的 list.service.ts 如下：

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from 'rxjs';
import { List } from '../models/list.model';
import { map } from 'rxjs/operators';
@Injectable()
export class ListService {

    constructor(private http: Http) { }

    private serverApi = 'http://localhost:3000';

    public getAllLists(): Observable<List[]> {

        const URI = `${this.serverApi}/yelp/`;
        return this.http.get(URI)
            .pipe(map(res => res.json()))
            .pipe(map(res => <List[]>res.lists))
    }
}

和我的 results-page.component.html 如下：

<table id="table">
  <thead>
    <tr>
      <th>Business Picture</th>
      <th>Business Name</th>
      <th>Description</th>
      <th> Scoops </th>

    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let list of lists">
      <td>{{list.location}}</td>
      <td>{{list.id}}</td>
    </tr>
  </tbody>
</table>

results-page.component.ts

import { Component, OnInit } from '@angular/core';
import { ListService } from '../services/list.service';
import { List } from '../models/list.model';

@Component({
  selector: 'app-results-page',
  templateUrl: './results-page.component.html',
  styleUrls: ['./results-page.component.css']
})
export class ResultsPageComponent implements OnInit {
  private lists: List[] = []; // creates a private variable of lists with type of model List an creates an empty array

  constructor(private listServ: ListService) { };

  ngOnInit() {

    this.loadLists(); //  loads all lists on init
  }

  public loadLists() {
    // get all lists from server and update lists property
    this.listServ.getAllLists().subscribe(response => this.lists = response, )
  }
}

最后也是我的 app.component.ts 如下：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { ResultsPageComponent } from './results-page/results-page.component';
import { SplashComponent } from './splash/splash.component';
import { ListService } from './services/list.service';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    ResultsPageComponent,
    SplashComponent
  ],
  imports: [
    BrowserModule,HttpModule,HttpClientModule
  ],
  providers: [ListService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

因此，这里发生了一些事情。首先，这似乎是一个不完整的例子。最好看一下results-page.component.ts，看看您实际在哪里调用getAllLists方法，以及如何尝试将该请求的结果放入模板中。您提供的界面似乎也没有显示列表类型，因为它具有您要在模板中访问的任何属性（类别，标题，描述）。无论如何，这是一个简单的堆栈闪电，说明了如何发出HTTP请求（使用HttpClient，而不是Http），订阅响应，然后将结果放入可在模板中访问的变量。

当然，如果您尝试访问响应对象上不存在的属性，则会收到错误消息。我只是不确定您输入的是错误的还是什么。如果您发表评论，我会尝试提供其他指导。

https://stackblitz.com/edit/angular-3ywm9x

Answer 2

 public getAllLists(): Observable<List[]> {

        const URI = `${this.serverApi}/yelp/`;
        return this.http.get(URI)
            .pipe(map(res => res.json()),
             map(res => <List[]>res.businesses));
    }

您的JSON没有属性lists，应改用businesses。

Express API调用Angular 6无数据

2 个答案: