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

Question

我的 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;
}

在我的组件中class

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 响应（第一个控制台语句的输出）。第二个控制台语句的输出显示为 "Undefined"

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

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

C:\Users3108>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

Answer 1

将您的界面更改为您的 JSON ，您可以使用 JSON2TS

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

并使用

访问它

console.log(this.promotion.promotionOrChallengeCode);

Answer 2

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

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);
          });
    }

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

Bind JSON http response to Angular 6 components

json

httpclient

subscribe

angular

angular6