角4：コンポーネントのプロパティ値を取得します。私は間違って何をしていますか？

Question

私はかなり緑色の角度1のデベロッパーで、角度4の周りに頭を抱えようとしています。これまでのところとても良いですが、私は確信していることにハングアップしています。 。

私のテンプレートでは、私はここに私はおそらくこれがどのように機能するかを誤解していますが、私は@Inputと思っているだろう

import { Component, OnInit, Input } from '@angular/core'; 
import { CardsDataService } from '../cards-data.service'; 

@Component({ 
    selector: 'app-card', 
    templateUrl: './card.component.html', 
    styleUrls: ['./card.component.css'] 
}) 

export class CardComponent implements OnInit { 

    cardData: any; 

    @Input() cardsType: string; 


    constructor(private CardsDataService: CardsDataService) {} 

    ngOnInit() { 
     this.CardsDataService.getData().subscribe((data) => { 
      this.cardData = data.tarot; 
     }); 

     console.log(this.cardsType); 
    } 

} 

ためcard.component.tsこのタグ

<app-card [cardsType]="majorArcana"></app-card> 

をだしています（）cardsType：文字列;コンソールでthis.cardsTypeを "majorArcana"として記録します。

それは動作しませんか？ここで

Answer 1

あなたはmajorArcanaという名前の親コンポーネントのプロパティに渡したいと言っている：

<app-card [cardsType]="majorArcana"></app-card> 

あなたが直接このような文字列を渡すことができる必要があります：

<app-card [cardsType]="'majorArcana'"></app-card> 

編集：他の方法で@PankajParkarから答えをチェックしてください。

Answer 2

基本的には、属性を[]でラップすると、コンポーネントのコンテキストや評価値が割り当てられたときにその式が評価されます。そこでここでは、この場合のmajorArcanaがundefinedに評価した（そして、あなたはそれを文字列として渡すことが予想された）

あなただけattribute代わりのproperty bindingを使用してこの問題を克服することができます。

cardsType="majorArcana" 

他&好ましい方法は、@Frank Modicaの答えだろう。すでにカバーされているように、私はFrankの答えにリンクしています。