Angular 创建绑定组件的列表

我正在尝试制作一个显示一手牌的应用程序，并且这些牌可以在单击时更改

我有一个手组件和一个卡片组件

hand.html：

<div class="col-lg-1" *ngFor="let card of cards">
        <app-card [card]="card"></app-card>
</div>

然后是card.component.ts：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html'
})
export class CardComponent implements OnInit {

  constructor() {

  }

  @Input()
  card: Card;

  ngOnInit() {
    this.card.number = 2;
    this.card.suit = 'diamonds';
  }

  changeNumber( num ){
    this.card.number = num;
  }


}

interface Card{
    suit:string;
    number:number;
}

现在，我得到了我的卡片列表，所有卡片都有初始化的2方块值。当我试图触发changeNumber函数时，比如从card元素上的onclick事件中，我得到一个错误，该错误表示“无法设置未定义的属性'number'

所以我真的很困惑，为什么我可以在ngOnInit中设置初始值，但再次尝试设置值，初始化后，card属性突然不存在（即使card的值显示在页面上）

---

我仍在试图找出@Input，可能是误用了它。

您的卡不应该是一组卡组件，而应该是一组卡

因此，与此相反：

cards:CardComponent[] = [];

应该是这样的：

cards: Card[] = [];

此代码：

<div class="col-lg-1" *ngFor="let card of cards">
        <app-card [card]="card"></app-card>
</div>

---

然后将为您创建适当数量的CardComponent实例。

好的，我明白您的意思。创建卡接口比创建组件更有意义。但是现在我如何访问从接口数据创建的组件？在执行此操作之前：

（单击）=“card.changeNumber（4）“

但现在卡不是一个组件。此外，即使我可以访问它，对卡组件所做的更改是否会绑定到存储在hand中的接口对象的值？现在，我的手不知道单个卡的值何时发生变化。它会变成这样：

（单击）=“card.number=4”

，如果你想构建一个plunker，概述任何剩余的问题，我们可以看看。是的，这会有很大帮助，但我只是不知道如何在plunkr中构建一个单页应用程序。你在上一次评论中所做的修改很好。但我需要在某个时候访问该组件。比如当我想换卡片的套装时，我需要真正的功能。我想我可以把它放在手部组件中，但那感觉就像是在工作。在Angular中，获取组件实例并按原样使用它们是不“正常”的。访问组件属性要“正常”得多。关于plunker问题，请使用“新建”按钮下拉列表并选择“角度”。然后使用左侧文件区域中的“新建文件”链接创建新文件。在新文件名中添加路径，例如“src/card.ts”。希望这有帮助。

<div class="col-lg-1" *ngFor="let card of cards">
        <app-card [card]="card"></app-card>
</div>