Warum kann ich keine Zeichenfolge an @input übergeben

Question

Ich habe eine Touch-freundlichen Spinner für meine App entwickelt, aber wenn ich den Namen an die Spinner Kindkomponente übergeben, ist es immer Null oder undefined. Was muss ich tun, damit die untergeordnete Spinner-Komponente die übergebene Zeichenfolge erkennt?

Hier ist der HTML-Aufruf an die untergeordnete Komponente:

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

In der Stammkomponente:

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); 
} 

Das Kind Komponente:

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

Sie erhalten Fehler, da Wenn Sie versuchen, Wert wie folgt zu übergeben: [spinName]="macroCarbs", es suchen es für die Variable macroCarbs in Ihrer Komponente. Wenn Sie Wert ohne [] übergeben, wie folgt: spinName="macroCarbs", dann wird es funktionieren. Wenn Sie Werte an Ihre Zahleneingaben übergeben, tun Sie dies auch ohne "".

Answer 2

Entfernen Sie einfach die [] von [spinName]="macroCarbs":

So

das ist, was Sie bekommen:

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

Answer 3

Versuch passieren:

[spinName]="'macroCarbs'" 

statt

[spinName]="macroCarbs" 

in Ihrem HTML Anruf