Как получить объект с помощью интерполяции, если тип объекта является составным типом в Angular 4

Question

Я изучаю Angular впервые. Я пытаюсь использовать @input() декоратор с типом объекта, производным / импортированным из интерфейса. Когда переменная @input() имеет строковый тип, она работает. Но когда @Input() является объектом, я не могу заставить его работать.

Course-Card component.ts:

import { Component, OnInit, Input } from '@angular/core';
import {Course} from '../model/course';

@Component({
     selector: 'course-card',
     templateUrl: './course-card.component.html',
     styleUrls: ['./course-card.component.css']
})
export class CourseCardComponent implements OnInit {
     @Input()
     title: Course;

     constructor() { }

     ngOnInit() {
     }
}

Course-Card component.html:

<div class="course-card">
    <div class="course-title">
         {{title.des}}// PROBLEM NOT GETTING THIS
    </div>
    <img width="300" alt="Angular Logo"
         src="https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png">
    <div class="course-description">
    A detailed walk-through of the most important part of Angular - the Core and Common modules.
    </div>
</div>

Я должен был использовать {{title.description}}, но я не получаю никакого значения.

course.ts:

export interface Course {
    id: number;
    description: string;
    iconUrl: string;
    longDescription: string;
    category: string;
    lessonsCount: number;
}

Answer 1

Это должно быть описание вместо des.title.description.Вы можете узнать больше о угловой шаблонной интерполяции .

И, Interface описывает тип переменной, т. Е. Какие свойства должен иметь объект этого типа.Он не устанавливает значение переменной.

Вы можете создать объект Course в компоненте следующим образом:

course: Course = {
    id: 1,
    description: 'my course description',
    iconUrl: '',
    longDescription: 'course description',
    category: 'angular',
    lessonsCount: 1
}

Затем в html-шаблоне компонента вы можетепередайте ему объект курса.

<course-card [course]="course">

Ваша входная переменная компонента карты курса: название может быть изменено на курс, чтобы иметь больше смысла:

 @Input()
 course: Course; 

И html вашей карты курсаназвание переменной можно изменить на курс, чтобы придать ему больше смысла:

<div class="course-title">
     {{course.description}} // It would work like this 
 </div>
 <img width="300" alt="Angular Logo"
      src="https://s3-us-west-1.amazonaws.com/angular-university/course-images/angular-core-in-depth-small.png">

 <div class="course-description">
     A detailed walk-through of the most important part of Angular - the Core and Common modules.
 </div>

Вы можете проверить этот пример стекаблица: https://stackblitz.com/edit/angular-8p7q3e.