文字列を@inputに渡すことができない

Question

私は自分のアプリにタッチフレンドリーなスピナーを開発しましたが、スピナーの子コンポーネントに名前を渡すと、常にnullまたは未定義です。スピナーの子コンポーネントに渡される文字列を認識させるには、どうすればよいですか？親コンポーネントで

<div class="ui-grid-col-8 spinnerMargin"> 
    <kg-spinner [spinName]="macroCarbs" 
       [range]="[10,50]" 
       [increment]="5" 
       [startValue]="20" 
       (onChanged)="onChanged($event)"></kg-spinner> 
</div> 

：

onChanged(sr: SpinnerReturn) { 
    if (sr.spinName === "macroCarbs") { 
     (<FormControl>this.macroForm.controls['macroCarbs']).setValue(sr.spinValue); 
    } else if(sr.spinName === "macroProtein") { 
     (<FormControl>this.macroForm.controls['macroProtein']).setValue(sr.spinValue); 
    } else if(sr.spinName === "calorieDifference") { 
     (<FormControl>this.macroForm.controls['calorieDifference']).setValue(sr.spingValue); 
} 

子コンポーネント：

import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
import { SpinnerReturn } from '../../interfaces/spinnerReturn'; 

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

export class KgSpinnerComponent implements OnInit { 
    @Input() startValue: number; 
    @Input() range: number[]; 
    @Input() increment: number; 
    @Input() spinName; 
    @Output() onChanged = new EventEmitter<SpinnerReturn>(); 

    curValue: number; 
    lowerLimit: number; 
    upperLimit: number; 
    name: string; 
    sr: SpinnerReturn; 

    constructor() { 
    this.sr = new SpinnerReturn(); 
    } 

    ngOnInit() { 
    this.lowerLimit = this.range[0]; 
    this.upperLimit = this.range[1]; 
    this.curValue = this.startValue; 
    } 

    onIncrement() { 
    this.curValue = this.curValue + this.increment; 
    this.returnEvent(); 
    } 

    onDecrement() { 
    this.curValue = this.curValue - this.increment; 
    this.returnEvent(); 
    } 

    returnEvent() { 
    this.sr.spinValue = this.curValue; 
    this.sr.spinName = this.spinName; 
    this.onChanged.emit(this.sr) 
    } 
} 

Answer 1

あなたはので、エラーを取得している中

[spinName]="macroCarbs" 

の

[spinName]="'macroCarbs'" 

を次のような値を渡そうとすると：[spinName]="macroCarbs"、検索あなたのコンポーネントにmacroCarbsという名前の変数のために。 []なしで値を渡すと、spinName="macroCarbs"のようになります。また、数字入力に値を渡すときは、""を付けずに値を入力します。

Answer 2

だけ[spinName]="macroCarbs"から[]を削除ここ

は、子コンポーネントへのHTML呼び出します：

だから、これはあなたが得るものです：

<kg-spinner spinName="macroCarbs" ...></kg-spinner> 

Answer 3

は渡すようにしてください。代わりにあなたのhtmlコール