如何将 TypeScript 接口传递给输入？

Question

如果我有以下界面：

/** carddetail.ts */
export interface CardDetail {
   name: string;
   type: string;
   logo?: string;

我怎样才能确保@Input()装饰器接受这种类型的数据？

import { CardDetail } from '../card-detail'

@Input cardDetail: CardDetail
export class CardComponent {
}

这给了我错误： 'CardDetail' only refers to a type, but is being used as a value here.ts(2693)

还有其他方法可以使用吗？ 在我的父母 class 中，我定义了一个

carddetails = CardDetail[]

constructor() {
 this.carddetails = [
      { name: "foo", logoUrl:'/assets/foo.png', type: "bar" } 
      ...
 ]

并将这些值传递到模板中的 *ngFor 中

<ng-template *ngFor="let cardDetail of carddetails">
    <app-card [cardDetail]="cardDetail"></app-card>
</ng-template>

Answer 1

@Input应该在组件 class 内。您还需要在@Input之后添加()所以它应该是

export class CardComponent {
   @Input() cardDetail: CardDetail
}

代替

@Input cardDetail: CardDetail
export class CardComponent {
}

同样来自你的父母 class 如果是这样的话，你似乎正在传递一个数组，那么它应该变成

@Input() cardDetail: CardDetail[];