Question

我试图创建一个显示一副牌的应用程序，并且这些卡片在点击时可以更改。

我有一个手部件和一个卡组件。

hand.html：

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

和app-card有自己的模板，显示卡的数量和套装。

hand.component.ts

import { Component, OnInit } from '@angular/core';
import { CardComponent } from '../card/card.component';

@Component({
  selector: 'app-hand',
  templateUrl: './hand.component.html'
})
export class HandComponent implements OnInit {
cards:CardComponent[] = [];

  constructor() {
    //Fill hand with 12 cards
    Array.from(Array(12)).forEach((x, i) => {
     this.cards.push( new CardComponent() );
    });

  }

  ngOnInit() {
  }

}

然后是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函数时，例如来自卡元素上的onclick事件，我收到一条错误，上面写着＆＃34;无法设置属性＆＃39; number＆＃39;未定义的。

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

我仍然想弄明白@Input，可能会误用它。

Answer 1

您的卡不应该是卡组件的阵列，而是一系列卡片。

所以不要这样：

cards:CardComponent[] = [];

应该是这样的：

cards: Card[] = [];

此代码：

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

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

创建绑定组件列表

1 个答案: