Question

我有一个JSON数据，如下所示：

{
"courses_purchased_count": 0,
"featured_lesson": {
    "lesson": {
        "id": 290,
        "name": "Christmas Test  #290",
        "course": {
            "id": 43,
            "name": "Christmas Test ",
            "description": "",
            "teacher": {
                "id": 4,
                "name": "Sandy's Teacher",
                "email": "xyz@s.com",
                "role": "TEACHER",
                "token": "xyz",
                "about": "Blah blah blah ",
                "phone": "2222222222",
                "image_url": "xyz",
                "payment_information": {}
            },
            "image": "xyz",
            "cover_image": "xyz",
            "course_type": "WEEKLY_ONGOING",
    },
    "status": "NEXT_AVAILABLE"
}
}

我要做的是将数据映射到我在models.ts中创建的类中，使用Cerializable Library

models.ts

import { deserialize, deserializeAs, Deserialize } from 'cerialize';

/* UTILTY METHODS */

export function cast(data, modelClass) {
  return Deserialize(data, modelClass)
}

export function castCollection (collection, modelClass) {
  return collection.map( item => cast(item, modelClass))
}

/* MODELS */

export class Teacher {

  @deserialize name: string
}

export class Course {

  @deserialize id: number
  @deserialize name: string
  @deserialize image: string
  @deserializeAs(Teacher) teacher : Teacher

}

export class Lesson {

  @deserialize id: number
  @deserialize name: string
  @deserialize start_time : Date
  @deserializeAs(Course) course : Course
}

export class Featured {
  @deserialize status : string
  @deserializeAs(Lesson) lesson : Lesson
}

在我的主页中，我只想显示课程对象中的数据，如下所示： {{featured_lesson.lesson.name}} 或来自 {{featured.lesson .course.name}} 但是由于某种错误，我收到了这个错误：

ERROR TypeError: Cannot read property 'name' of undefined

主页组件是：

homepage.component.ts

import { Component, OnInit } from '@angular/core';
import { deserialize, Deserialize } from 'cerialize'
import { HttpClient } from '@angular/common/http';
import { cast, castCollection, Lesson, Featured } from "../../../models/models";

@Component({
  selector: 'app-my-classes',
  templateUrl: './my-classes.component.html',
  styleUrls: ['./my-classes.component.css']
})

export class MyClassesComponent implements OnInit {

   featured_lesson : Featured[] = []

   constructor(private http : HttpClient) { }

   ngOnInit() {

   }

   ngAfterViewInit(){
     this.http.get("/ui/student/home").subscribe( data => {
       this.featured_lesson = castCollection(data['featured_lesson'], Featured)
   })
   }
 }

homepage.component.html

<layout-app>

  <div>
    {{featured_lesson.lesson.name}}
  </div>

</layout-app>

因为我尝试过做这些事情，所以这些是：

feautred_lesson：精选[] = {}，因为我觉得它是一个对象，所以可能会给对象做，但我们收到错误说Type '{}' is not assignable to type 'Featured[]'. Property 'includes' is missing in type '{}'.
我尝试获取“状态”的价值，例如 {{featured_lesson.status}} ，其错误为ERROR TypeError: collection.map is not a function at castCollection (models.ts:10)
为了获得这样的对象，为此而做了这个：

ngAfterViewInit(){ this.http.get("/ui/student/home").subscribe( data => { this.lessons = castCollection(data['other_lessons'], Lesson) //this.featured_lesson = castCollection(data['featured_lesson'], Featured) this.featured_lesson = data['featured_lesson'] })

并在console.log（this.featured_lesson）中给了我结果，但是当我尝试在我的html文件中打印它时，这样 {{featured_lesson.lesson.name}} 同样的错误{{ 1}}

我正在寻找解决方案，需要指导，因为我更瘦，并且想要更多地了解角度。这件事对我有帮助。感谢

Answer 1

在您的组件中，featured_lesson是一个表格：

featured_lesson : Featured[] = []

但是在你的HTML中，你希望它是一个对象：

<div>
  {{featured_lesson.lesson.name}}
</div>

表格不是一个对象（嗯......至少不是你想象的那样），这意味着你无法访问数组中的对象属性。

如果您想要访问它，您有两个解决方案：

1 - 将featured_lesson转换为对象：

featured_lesson : Featured = new Featured();

2 - 在HTML中显示对象：

{{featured_lesson[0].lesson.name}}

Angular 2，使用Cerialize Library

1 个答案: