如何为Angular的@Input()传递TypeScript接口类型数据？

1. 修复子组件@Input的语法错误 #

你的子组件代码存在两处关键错误：

• @Input装饰器缺少括号，正确写法是@Input()
• 属性定义必须放在组件类内部，而非类外部

修正后的子组件代码：

import { Input, Component } from '@angular/core'; // 需导入Component装饰器
import { CardDetail } from '../card-detail';

@Component({
  selector: 'app-card',
  // 补充你的template/templateUrl等组件配置
})
export class CardComponent {
  @Input() cardDetail: CardDetail; // 将属性移至类内部，补全@Input()语法
}

2. 修复父组件的类型声明错误 #

TypeScript接口仅作为编译时类型校验工具，不能直接当作值赋值。你父组件里carddetails = CardDetail[]的写法错误，需用类型注解: CardDetail[]声明变量类型；同时数组项里的logoUrl与接口定义的logo属性名不匹配，需统一属性名。

修正后的父组件代码：

import { Component } from '@angular/core';
import { CardDetail } from '../card-detail';

@Component({
  selector: 'app-parent',
  // 补充组件配置
})
export class ParentComponent {
  carddetails: CardDetail[]; // 用类型注解声明变量类型，而非直接赋值类型

  constructor() {
    this.carddetails = [
      { name: "foo", logo: '/assets/foo.png', type: "bar" }, // 将logoUrl改为logo
      // 其他数据项
    ];
  }
}

3. 优化模板中的*ngFor用法 #

虽然*ngFor可以用在<ng-template>上，但更简洁且无额外DOM节点的写法是使用<ng-container>，也可直接将指令绑定到<app-card>的父容器：

推荐写法（ng-container）： #

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

极简写法： #

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

若坚持使用ng-template的正确写法： #

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

关于'CardDetail' only refers to a type, but is being used as a value here错误的说明 #

TypeScript接口仅在编译阶段生效，编译后会被完全移除，它不是可实例化的类或可直接使用的值。你之前的代码错误地将接口类型当作值进行赋值（如carddetails = CardDetail[]），这违反了TypeScript的类型规则，因此触发该错误。

内容的提问来源于stack exchange，提问作者enrm