Question

我是第一次学习Angular。我试图将@input()装饰器与从接口派生/导入的对象类型一起使用。当@input()变量为字符串类型时，它将起作用。但是当@Input()是一个对象时，那么我将无法使其工作。

课程卡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() {
     }
}

课程卡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。您可以阅读有关Angular template interpolation的更多信息。

并且，接口描述了变量类型，即该类型的对象应具有的属性。它不会设置变量的值。

您可以在这样的组件中创建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;

您的Course-Card html变量名称标题可以更改为course，以使其更有意义：

<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。

如果对象的类型是Angular 4中的复合类型，如何通过插值获取对象

1 个答案: