如何在Angular Grid中显示JSON嵌套数据

时间:2018-03-05 14:34:27

标签: angular kendo-ui-grid

我正在研究Angular 5应用程序,我得到了具有以下数据结构的类,我需要在模板中显示,可能使用Angular Kendo UI Grid,如果没有那么样本以格式显示

我在json中获得了以下类数据

export class MyClass{
ConsultationId: string;
ResponseType: {
    id: string;
    Name:string;
};
TotalResponses: string;
TotalNewResponses:string;
TotalReviewResponses:string;
TotalCompletedResponses:string;
responsesAbstract: {
    ResponseId: string;
    ConsultationId: string;
    ResponseTypeId:string;
    RespondentId:string;
    ResponseCurrentStatus:string
}

}

json数据的屏幕截图

enter image description here

尝试按{{MyClass.ResponseType.Name}}打印ResponseType名称,但Angular无法识别它

1 个答案:

答案 0 :(得分:1)

我认为您必须根据数据更新类属性

class Component {
  items: MyClass[] = [];

  assign(data) {
    this.items = data;
  }
}

和组件

POST / HTTP/1.1
x-amz-sns-message-type: Notification
x-amz-sns-message-id: da41e39f-ea4d-435a-b922-c6aae3915ebe
x-amz-sns-topic-arn: arn:aws:sns:us-west-2:123456789012:MyTopic
x-amz-sns-subscription-arn: arn:aws:sns:us-west-2:123456789012:MyTopic:2bcfbf39-05c3-41de-beaa-fcfcc21c8f55
Content-Length: 761
Content-Type: text/plain; charset=UTF-8
Host: ec2-50-17-44-49.compute-1.amazonaws.com
Connection: Keep-Alive
User-Agent: Amazon Simple Notification Service Agent

{
  "Type" : "Notification",
  "MessageId" : "da41e39f-ea4d-435a-b922-c6aae3915ebe",
  "TopicArn" : "arn:aws:sns:us-west-2:123456789012:MyTopic",
  "Subject" : "test",
  "Message" : "test message",
  "Timestamp" : "2012-04-25T21:49:25.719Z",
  "SignatureVersion" : "1",
  "Signature" : "EXAMPLElDMXvB8r9R83tGoNn0ecwd5UjllzsvSvbItzfaMpN2nk5HVSw7XnOn/49IkxDKz8YrlH2qJXj2iZB0Zo2O71c4qQk1fMUDi3LGpij7RCW7AW9vYYsSqIKRnFS94ilu7NFhUzLiieYr4BKHpdTmdD6c0esKEYBpabxDSc=",
  "SigningCertURL" : "https://sns.us-west-2.amazonaws.com/SimpleNotificationService-f3ecfb7224c7233fe7bb5f59f96de52f.pem",
  "UnsubscribeURL" : "https://sns.us-west-2.amazonaws.com/?Action=Unsubscribe&SubscriptionArn=arn:aws:sns:us-west-2:123456789012:MyTopic:2bcfbf39-05c3-41de-beaa-fcfcc21c8f55"
}