如何將 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[];