将 JSON http 响应绑定到 Angular 6 组件答案

【问题标题】：Bind JSON http response to Angular 6 components将 JSON http 响应绑定到 Angular 6 组件
【发布时间】：2018-08-08 17:06:01
【问题描述】：

我的 HttpClient GET 方法低于 JSON 响应

{
  shortDescription: "3", 
  promotionName: "2", 
  highResolutionImage: "4", 
  lowResolutionImage: "5", 
  promotionOrChallengeCode: "aaa"
}

Promotion.ts

export interface IPromotion
{

    PromotionOrChallengeCode:string;
    PromotionName:string;
    ShortDescription:string;
    HighResolutionImage:string;
    LowResolutionImage:string;
}

在我的组件类中

promotion:IPromotion;

onSubmit() : void {

    this.httpClient.get('http://localhost:8080/api/search/'+this.pcode )
    .subscribe((response:IPromotion) => 
          { 
            console.log(response);
            this.promotion = response; 
            console.log(this.promotion.PromotionOrChallengeCode);
          });
    }

在浏览器控制台中，我可以查看 JSON 响应（第一个控制台语句的输出）。第二个控制台语句的输出显示为“未定义”

让我知道如何读取 JSON 数据并绑定到 HTML 元素

以下是我正在使用的当前 Angular 版本：

C:\Users\893108>ng -v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.2
Node: 8.11.3
OS: win32 ia32
Angular:
...

Package                      Version
------------------------------------------------------

rxjs                         6.2.2

typescript                   2.7.2

【问题讨论】：

console.log(response) 显示什么？
名称区分大小写，因此PromotionOrChallengeCode 与promotionOrChallengeCode 不同
请通过@Sajeetharan 发布确切的输出请求
JavaScript 和 JSON 区分大小写。您没有看到 JSON 属性的拼写方式与您的界面中的拼写方式不同吗？关于绑定：角度文档中对此进行了描述。你读过它并至少尝试过吗？我们不会重复文档解释的内容。 angular.io/guide/displaying-data
感谢@JB Nizet 的评论。我是 Angular 的新手。我一定会浏览 Angular.io 文档

标签： json angular httpclient angular6 subscribe

【解决方案1】：

将您的接口更改为 JSON ，您可以使用 JSON2TS

 export interface RootObject {
        shortDescription: string;
        promotionName: string;
        highResolutionImage: string;
        lowResolutionImage: string;
        promotionOrChallengeCode: string;
}

并使用它访问它

console.log(this.promotion.promotionOrChallengeCode);

【讨论】：

谢谢萨吉塔兰。你的建议效果很好。你拯救了我的一天:)
你为什么删除答案？
对不起...我想我可以选择两个答案。通过选择另一个，默认情况下它会删除您的。

【解决方案2】：

问题是您的 json 接口需要与您的 api 响应具有相同的大小写。此外，您需要将 HttpClient 交给 Angular 接口的通用签名。

export interface IPromotion
{

    promotionOrChallengeCode: string;
    promotionName: string;
    shortDescription: string;
    highResolutionImage: string;
    lowResolutionImage: string;
}

promotion:IPromotion;

onSubmit() : void {

    this.httpClient.get<IPromotion>('http://localhost:8080/api/search/'+this.pcode )
    .subscribe((response:IPromotion) => 
          { 
            console.log(response);
            this.promotion = response; 
            console.log(this.promotion.promotionOrChallengeCode);
          });
    }

【讨论】：