Angular 未进行API调用，因为它未反映在Google chrome开发者工具的网络选项卡中

我试图调用一个配方API，解析响应，然后在HTML中显示它。代码如下：

display-recipes.component.html

<p>display-recipes works!</p>
<div id='display_recipe'  *ngFor="let recipe of recipeResult.hits">
    {{calories}}  {{recipe}}
</div>

search-recipe.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RecipeGlobal, Recipe } from './pojos/RecipeGlobal';
import { Observable, of} from 'rxjs';
import {catchError, map, tap} from 'rxjs/operators'
import { Component, OnInit, Input } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SearchRecipeService {

  constructor(
    private http: HttpClient) {}

    private searchUrl = 'https://api.edamam.com/search?q=bandejapaisa&app_id=xxxx&app_key=xxxxxxx&from=0&to=3&calories=591-722&health=alcohol-free';

  getRecipeInfo(): Observable<RecipeGlobal>{
         return this.http.get<RecipeGlobal>(this.searchUrl)
         .pipe(

           catchError(_ => {console.log("error"); return [];})
         );
  }


}

API调用的响应应该是：

{

---

我只是使用上面提到的POJO类来解析响应中的一些元素。我看到组件正在从父组件正确加载，但由于没有进行API调用，它没有在div中显示数据。我看到控制台中显示错误日志，但网络选项卡中没有显示API调用。

您对typescript中的类有一些误解。typescript中的类并不是什么魔法。您只定义了类，希望angular自动将原始响应映射到实际的类结构。它们没有。您必须手动将原始响应映射到实际的类定义结构

getRecipeInfo：可观察{ 返回this.http.getthis.searchUrl 管 mapres=>this.mapRawResponseres catchError_u886;=>{console.logerror；返回[]；} ; } 私有mapRawResponserawResponse:RecipeGlobal{ //…将响应映射到配方的代码。 } 如果不想映射响应，请更改类定义的结构以匹配原始响应

对于网络选项卡中显示的无API调用，请检查其上的过滤器，您可以使用一些过滤器css/Img/Media/等。将其切换到xhr/All以查看

用适当的类更新 改为使用此类以获得类型支持：

导出接口RecipeGlobal{ q：字符串； 起始：编号； 至：编号； 更多：布尔； 计数：数字； 点击：点击[]； } 导出接口命中{ 配方：配方； 书签：布尔； 购买：布尔； } 导出接口配方{ uri：字符串； 标签：字符串； 图像：字符串； 资料来源：字符串； url:string； shareAs：字符串； 产量：个数； dietLabels:字符串[]； healthLabels:字符串[]； 注意事项：任何[]； ingredientLines:字符串[]； 成分：成分[]； 卡路里：数字； 总重量：个数； 总时间：个数； 总计：{[key:string]：总计}； totalDaily:{[key:string]：Total}； 摘要：摘要[]； } 导出接口摘要{ 标签：字符串； 标签：字符串； schemaOrgTag:null |字符串； 总数：个； hasRDI：布尔型； 每日：数量； 单位：单位； sub？：摘要[]； } 导出枚举单元{ 空=%， G=G， Kcal=Kcal， Mg=Mg， Μg=微克， } 导出接口组件{ 文本：字符串； 重量：个数； } 导出接口总数{ 标签：字符串； 数量：数量； 单位：单位； }

---

您的响应类型和类定义完全不同。您是否将原始响应映射到某个地方的类定义？@ShadabFaiz no。这是唯一的地方。我希望响应在服务方法中得到正确解析。然后我从subscribe中的组件方法获取它。嗨，Shabad。当您说“类定义”时，请执行以下操作：你的意思是更改pojo的结构以匹配原始响应？我还在控制台中看到错误日志。根据类定义，我的意思是你如何构造Recipe和RecipeGlobal的属性。我将用适当的结构更新我的答案。你可以使用它。至于日志错误，这些错误是什么？如果发生了什么，我会告诉你将该错误放入catchError块中。我假设如果请求成功，则不会执行catch error块，并且关于network选项卡，即使我切换到all，API调用也不存在。在这一行中，this.recipeResult=new RecipeGlobal，我得到了。RecipeGlobal仅引用一个类型，但被用作值。实际上我现在得到了一个不同的错误。我在控制台日志中得到了一个404，调用没有显示在“网络”选项卡中。但是请求是从邮递员那里发出的。它是一个get请求，没有标题，只有URL。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RecipeGlobal, Recipe } from './pojos/RecipeGlobal';
import { Observable, of} from 'rxjs';
import {catchError, map, tap} from 'rxjs/operators'
import { Component, OnInit, Input } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SearchRecipeService {

  constructor(
    private http: HttpClient) {}

    private searchUrl = 'https://api.edamam.com/search?q=bandejapaisa&app_id=xxxx&app_key=xxxxxxx&from=0&to=3&calories=591-722&health=alcohol-free';

  getRecipeInfo(): Observable<RecipeGlobal>{
         return this.http.get<RecipeGlobal>(this.searchUrl)
         .pipe(

           catchError(_ => {console.log("error"); return [];})
         );
  }


}

export class RecipeGlobal{
    q!: String;
    hits!: Recipe[];
}

export class Recipe{
    image: String;
    calories: String;
    label: String
}

  "q": "bandeja paisa",
  "from": 0,
  "to": 3,
  "more": false,
  "count": 1,
  "hits": [
    {
      "recipe": {
        "uri": "http://www.edamam.com/ontologies/edamam.owl#recipe_023ae14ca70ba202bfa5dddfd60564a8",
        "label": "Bandeja Paisa",
        "image": "https://www.edamam.com/web-img/e7e/e7e5236b4b1c067c881c25004ee9e239.jpg",
        "source": "My Recipes",
        "url": "http://www.myrecipes.com/recipe/bandeja-paisa",
        "shareAs": "http://www.edamam.com/recipe/bandeja-paisa-023ae14ca70ba202bfa5dddfd60564a8/bandeja+paisa/alcohol-free/591-722-cal",
        "yield": 4.0,
        "dietLabels": [
          "Low-Carb"
        ],
        "healthLabels": [
          "Sugar-Conscious",
          "Peanut-Free",
          "Tree-Nut-Free",
          "Alcohol-Free"
        ],
        "cautions": [],
        "ingredientLines": [
          "1 pound skinless pork belly",
          "2 teaspoons kosher salt",
          "2 teaspoons granulated sugar",
          "1/2 teaspoon ground cumin"
        ],
        "ingredients": [
          {
            "text": "1 pound skinless pork belly",
            "weight": 453.59237
          },
          {
            "text": "2 teaspoons kosher salt",
            "weight": 9.70833333382575
          },
          {
            "text": "2 teaspoons granulated sugar",
            "weight": 8.4
          },
          {
            "text": "1/2 teaspoon ground cumin",
            "weight": 1.05
          }
        ],
        "calories": 2386.0539766,
        "totalWeight": 465.4413539831457,
        "totalTime": 780.0,
        "totalNutrients": {
          "ENERC_KCAL": {
            "label": "Energy",
            "quantity": 2386.0539766,
            "unit": "kcal"
          },
          "FAT": {
            "label": "Fat",
            "quantity": 240.68315033700003,
            "unit": "g"
          },
          "FASAT": {
            "label": "Saturated",
            "quantity": 87.695522621,
            "unit": "g"
          },
          "FAMS": {
            "label": "Monounsaturated",
            "quantity": 112.18473539000001,
            "unit": "g"
          },
          "FAPU": {
            "label": "Polyunsaturated",
            "quantity": 25.662398405000005,
            "unit": "g"
          },
          "CHOCDF": {
            "label": "Carbs",
            "quantity": 8.86284,
            "unit": "g"
          },
          "FIBTG": {
            "label": "Fiber",
            "quantity": 0.11025,
            "unit": "g"
          },
          "SUGAR": {
            "label": "Sugars",
            "quantity": 8.406825,
            "unit": "g"
          },
          "SUGAR.added": {
            "label": "Sugars, added",
            "quantity": 8.3832,
            "unit": "g"
          },
          "PROCNT": {
            "label": "Protein",
            "quantity": 42.552532358,
            "unit": "g"
          },
          "CHOLE": {
            "label": "Cholesterol",
            "quantity": 326.5865064,
            "unit": "mg"
          },
          "NA": {
            "label": "Sodium",
            "quantity": 1076.7957705876,
            "unit": "mg"
          },
          "CA": {
            "label": "Calcium",
            "quantity": 33.114874655954964,
            "unit": "mg"
          },
          "MG": {
            "label": "Magnesium",
            "quantity": 22.01068463983146,
            "unit": "mg"
          },
          "K": {
            "label": "Potassium",
            "quantity": 858.2798032186518,
            "unit": "mg"
          },
          "FE": {
            "label": "Iron",
            "quantity": 3.0675769711443808,
            "unit": "mg"
          },
          "ZN": {
            "label": "Zinc",
            "quantity": 4.6802811579831465,
            "unit": "mg"
          },
          "P": {
            "label": "Phosphorus",
            "quantity": 495.1192596000001,
            "unit": "mg"
          },
          "VITA_RAE": {
            "label": "Vitamin A",
            "quantity": 14.279771100000001,
            "unit": "µg"
          },
          "VITC": {
            "label": "Vitamin C",
            "quantity": 1.4416271100000002,
            "unit": "mg"
          },
          "THIA": {
            "label": "Thiamin (B1)",
            "quantity": 1.8028197852000003,
            "unit": "mg"
          },
          "RIBF": {
            "label": "Riboflavin (B2)",
            "quantity": 1.1027230354000002,
            "unit": "mg"
          },
          "NIA": {
            "label": "Niacin (B3)",
            "quantity": 21.126516933900003,
            "unit": "mg"
          },
          "VITB6A": {
            "label": "Vitamin B6",
            "quantity": 0.594237581,
            "unit": "mg"
          },
          "FOLDFE": {
            "label": "Folate equivalent (total)",
            "quantity": 4.640923700000001,
            "unit": "µg"
          },
          "FOLFD": {
            "label": "Folate (food)",
            "quantity": 4.640923700000001,
            "unit": "µg"
          },
          "VITB12": {
            "label": "Vitamin B12",
            "quantity": 3.810175908,
            "unit": "µg"
          },
          "TOCPHA": {
            "label": "Vitamin E",
            "quantity": 1.8039752430000002,
            "unit": "mg"
          },
          "VITK1": {
            "label": "Vitamin K",
            "quantity": 0.05670000000000001,
            "unit": "µg"
          },
          "WATER": {
            "label": "Water",
            "quantity": 166.7409447059663,
            "unit": "g"
          }
        },
        "totalDaily": {
          "ENERC_KCAL": {
            "label": "Energy",
            "quantity": 119.30269883000001,
            "unit": "%"
          },
          "FAT": {
            "label": "Fat",
            "quantity": 370.2817697492308,
            "unit": "%"
          },
          "FASAT": {
            "label": "Saturated",
            "quantity": 438.477613105,
            "unit": "%"
          },
          "CHOCDF": {
            "label": "Carbs",
            "quantity": 2.95428,
            "unit": "%"
          },
          "FIBTG": {
            "label": "Fiber",
            "quantity": 0.441,
            "unit": "%"
          },
          "PROCNT": {
            "label": "Protein",
            "quantity": 85.105064716,
            "unit": "%"
          },
          "CHOLE": {
            "label": "Cholesterol",
            "quantity": 108.8621688,
            "unit": "%"
          },
          "NA": {
            "label": "Sodium",
            "quantity": 44.86649044115,
            "unit": "%"
          },
          "CA": {
            "label": "Calcium",
            "quantity": 3.3114874655954964,
            "unit": "%"
          },
          "MG": {
            "label": "Magnesium",
            "quantity": 5.240639199959872,
            "unit": "%"
          },
          "K": {
            "label": "Potassium",
            "quantity": 18.261272408907484,
            "unit": "%"
          },
          "FE": {
            "label": "Iron",
            "quantity": 17.042094284135448,
            "unit": "%"
          },
          "ZN": {
            "label": "Zinc",
            "quantity": 42.548010527119516,
            "unit": "%"
          },
          "P": {
            "label": "Phosphorus",
            "quantity": 70.73132280000002,
            "unit": "%"
          },
          "VITA_RAE": {
            "label": "Vitamin A",
            "quantity": 1.5866412333333333,
            "unit": "%"
          },
          "VITC": {
            "label": "Vitamin C",
            "quantity": 1.6018079000000003,
            "unit": "%"
          },
          "THIA": {
            "label": "Thiamin (B1)",
            "quantity": 150.23498210000002,
            "unit": "%"
          },
          "RIBF": {
            "label": "Riboflavin (B2)",
            "quantity": 84.82484887692308,
            "unit": "%"
          },
          "NIA": {
            "label": "Niacin (B3)",
            "quantity": 132.040730836875,
            "unit": "%"
          },
          "VITB6A": {
            "label": "Vitamin B6",
            "quantity": 45.71058315384615,
            "unit": "%"
          },
          "FOLDFE": {
            "label": "Folate equivalent (total)",
            "quantity": 1.1602309250000002,
            "unit": "%"
          },
          "VITB12": {
            "label": "Vitamin B12",
            "quantity": 158.7573295,
            "unit": "%"
          },
          "TOCPHA": {
            "label": "Vitamin E",
            "quantity": 12.026501620000001,
            "unit": "%"
          },
          "VITK1": {
            "label": "Vitamin K",
            "quantity": 0.04725000000000001,
            "unit": "%"
          }
        },
        "digest": [
          {
            "label": "Fat",
            "tag": "FAT",
            "schemaOrgTag": "fatContent",
            "total": 240.68315033700003,
            "hasRDI": true,
            "daily": 370.2817697492308,
            "unit": "g",
            "sub": [
              {
                "label": "Saturated",
                "tag": "FASAT",
                "schemaOrgTag": "saturatedFatContent",
                "total": 87.695522621,
                "hasRDI": true,
                "daily": 438.477613105,
                "unit": "g"
              },
              {
                "label": "Trans",
                "tag": "FATRN",
                "schemaOrgTag": "transFatContent",
                "total": 0.0,
                "hasRDI": false,
                "daily": 0.0,
                "unit": "g"
              },
              {
                "label": "Monounsaturated",
                "tag": "FAMS",
                "schemaOrgTag": null,
                "total": 112.18473539000001,
                "hasRDI": false,
                "daily": 0.0,
                "unit": "g"
              },
              {
                "label": "Polyunsaturated",
                "tag": "FAPU",
                "schemaOrgTag": null,
                "total": 25.662398405000005,
                "hasRDI": false,
                "daily": 0.0,
                "unit": "g"
              }
            ]
          },
          {
            "label": "Carbs",
            "tag": "CHOCDF",
            "schemaOrgTag": "carbohydrateContent",
            "total": 8.86284,
            "hasRDI": true,
            "daily": 2.95428,
            "unit": "g",
            "sub": [
              {
                "label": "Carbs (net)",
                "tag": "CHOCDF.net",
                "schemaOrgTag": null,
                "total": 8.75259,
                "hasRDI": false,
                "daily": 0.0,
                "unit": "g"
              },
              {
                "label": "Fiber",
                "tag": "FIBTG",
                "schemaOrgTag": "fiberContent",
                "total": 0.11025,
                "hasRDI": true,
                "daily": 0.441,
                "unit": "g"
              },
              {
                "label": "Sugars",
                "tag": "SUGAR",
                "schemaOrgTag": "sugarContent",
                "total": 8.406825,
                "hasRDI": false,
                "daily": 0.0,
                "unit": "g"
              },
              {
                "label": "Sugars, added",
                "tag": "SUGAR.added",
                "schemaOrgTag": null,
                "total": 8.3832,
                "hasRDI": false,
                "daily": 0.0,
                "unit": "g"
              }
            ]
          },
          {
            "label": "Protein",
            "tag": "PROCNT",
            "schemaOrgTag": "proteinContent",
            "total": 42.552532358,
            "hasRDI": true,
            "daily": 85.105064716,
            "unit": "g"
          },
          {
            "label": "Cholesterol",
            "tag": "CHOLE",
            "schemaOrgTag": "cholesterolContent",
            "total": 326.5865064,
            "hasRDI": true,
            "daily": 108.8621688,
            "unit": "mg"
          },
          {
            "label": "Sodium",
            "tag": "NA",
            "schemaOrgTag": "sodiumContent",
            "total": 1076.7957705876,
            "hasRDI": true,
            "daily": 44.86649044115,
            "unit": "mg"
          },
          {
            "label": "Calcium",
            "tag": "CA",
            "schemaOrgTag": null,
            "total": 33.114874655954964,
            "hasRDI": true,
            "daily": 3.3114874655954964,
            "unit": "mg"
          },
          {
            "label": "Magnesium",
            "tag": "MG",
            "schemaOrgTag": null,
            "total": 22.01068463983146,
            "hasRDI": true,
            "daily": 5.240639199959872,
            "unit": "mg"
          },
          {
            "label": "Potassium",
            "tag": "K",
            "schemaOrgTag": null,
            "total": 858.2798032186518,
            "hasRDI": true,
            "daily": 18.261272408907484,
            "unit": "mg"
          },
          {
            "label": "Iron",
            "tag": "FE",
            "schemaOrgTag": null,
            "total": 3.0675769711443808,
            "hasRDI": true,
            "daily": 17.042094284135448,
            "unit": "mg"
          },
          {
            "label": "Zinc",
            "tag": "ZN",
            "schemaOrgTag": null,
            "total": 4.6802811579831465,
            "hasRDI": true,
            "daily": 42.548010527119516,
            "unit": "mg"
          },
          {
            "label": "Phosphorus",
            "tag": "P",
            "schemaOrgTag": null,
            "total": 495.1192596000001,
            "hasRDI": true,
            "daily": 70.73132280000002,
            "unit": "mg"
          },
          {
            "label": "Vitamin A",
            "tag": "VITA_RAE",
            "schemaOrgTag": null,
            "total": 14.279771100000001,
            "hasRDI": true,
            "daily": 1.5866412333333333,
            "unit": "µg"
          },
          {
            "label": "Vitamin C",
            "tag": "VITC",
            "schemaOrgTag": null,
            "total": 1.4416271100000002,
            "hasRDI": true,
            "daily": 1.6018079000000003,
            "unit": "mg"
          },
          {
            "label": "Thiamin (B1)",
            "tag": "THIA",
            "schemaOrgTag": null,
            "total": 1.8028197852000003,
            "hasRDI": true,
            "daily": 150.23498210000002,
            "unit": "mg"
          },
          {
            "label": "Riboflavin (B2)",
            "tag": "RIBF",
            "schemaOrgTag": null,
            "total": 1.1027230354000002,
            "hasRDI": true,
            "daily": 84.82484887692308,
            "unit": "mg"
          },
          {
            "label": "Niacin (B3)",
            "tag": "NIA",
            "schemaOrgTag": null,
            "total": 21.126516933900003,
            "hasRDI": true,
            "daily": 132.040730836875,
            "unit": "mg"
          },
          {
            "label": "Vitamin B6",
            "tag": "VITB6A",
            "schemaOrgTag": null,
            "total": 0.594237581,
            "hasRDI": true,
            "daily": 45.71058315384615,
            "unit": "mg"
          },
          {
            "label": "Folate equivalent (total)",
            "tag": "FOLDFE",
            "schemaOrgTag": null,
            "total": 4.640923700000001,
            "hasRDI": true,
            "daily": 1.1602309250000002,
            "unit": "µg"
          },
          {
            "label": "Folate (food)",
            "tag": "FOLFD",
            "schemaOrgTag": null,
            "total": 4.640923700000001,
            "hasRDI": false,
            "daily": 0.0,
            "unit": "µg"
          },
          {
            "label": "Folic acid",
            "tag": "FOLAC",
            "schemaOrgTag": null,
            "total": 0.0,
            "hasRDI": false,
            "daily": 0.0,
            "unit": "µg"
          },
          {
            "label": "Vitamin B12",
            "tag": "VITB12",
            "schemaOrgTag": null,
            "total": 3.810175908,
            "hasRDI": true,
            "daily": 158.7573295,
            "unit": "µg"
          },
          {
            "label": "Vitamin D",
            "tag": "VITD",
            "schemaOrgTag": null,
            "total": 0.0,
            "hasRDI": false,
            "daily": 0.0,
            "unit": "µg"
          },
          {
            "label": "Vitamin E",
            "tag": "TOCPHA",
            "schemaOrgTag": null,
            "total": 1.8039752430000002,
            "hasRDI": true,
            "daily": 12.026501620000001,
            "unit": "mg"
          },
          {
            "label": "Vitamin K",
            "tag": "VITK1",
            "schemaOrgTag": null,
            "total": 0.05670000000000001,
            "hasRDI": true,
            "daily": 0.04725000000000001,
            "unit": "µg"
          },
          {
            "label": "Sugar alcohols",
            "tag": "Sugar.alcohol",
            "schemaOrgTag": null,
            "total": 0.0,
            "hasRDI": false,
            "daily": 0.0,
            "unit": "g"
          },
          {
            "label": "Water",
            "tag": "WATER",
            "schemaOrgTag": null,
            "total": 166.7409447059663,
            "hasRDI": false,
            "daily": 0.0,
            "unit": "g"
          }
        ]
      },
      "bookmarked": false,
      "bought": false
    }
  ]
}