Angular 4：獲取組件屬性值。我究竟做錯了什麼？

我是一個相當綠色的Angular 1開發人員，試圖讓我的頭部圍繞Angular 4.迄今爲止這麼好，但我掛斷了我確信的是一個非常簡單的問題，其中一個人可以在第二個問題中解決。Angular 4：獲取組件屬性值。我究竟做錯了什麼？

在我的模板我有這個標籤

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

下面是

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我可能只是誤解是如何工作的，但我本來以爲@input （）cardsType：string;會在控制檯中將this.cardsType記錄爲「majorArcana」。

這是不是它是如何工作的？

來源

2017-07-19 Bryan White

它是如何寫在這裏，大阿爾克那是屬於具有裏面寫的應用程序卡標籤組件的屬性。這裏你說的是你的輸入（cardsType）將具有majorArcana屬性的值。 –

在這裏，你說你要在名爲majorArcana父組件的屬性來傳遞：

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

你應該能夠在字符串中直接傳遞這樣的：

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

編輯：從@PankajParkar查看其他方式的答案。

來源

2017-07-19 13:24:31

或者像這樣'cardsType =「majorArcana」' –

啊。好。我在使用[]或（）來綁定屬性數據的指令下運行。我發現這絕對是表達式的情況，但是實際上我需要將它放在單引號中以指定值是一個字符串。對於一個字符串，這是首選的方法還是@PankakParkar的版本的方法？因爲都工作。 –

@BryanWhite就個人而言，括號告訴我'app-card'組件有一個名爲'cardsType'的輸入，而如果沒有括號，我可能會認爲那個屬性是另一個原因。但是如果你總是傳遞一個字符串，我想任何一種方式都可以。 –

基本上當你與[]包裝你的屬性，它的計算結果，對部分內容和表達的任何評估值被分配發生的事情是。所以這裏在這種情況下majorArcana評價爲undefined（你預計它作爲字符串傳遞）

您可以通過只使用attribute代替property binding解決這個問題。

cardsType="majorArcana"

其他&首選方法是@Frank Modica的答案。正如其已經涵蓋的，我只是將它與弗蘭克的答案聯繫起來。

來源

2017-07-19 13:26:28

很高興知道！謝謝你的幫助！ –

Angular 4：獲取組件屬性值。我究竟做錯了什麼？

回答

相關問題