angular - Neden bir stringi @input'a geçiremiyorum

Uygulamam için dokunmaya uygun bir spinner geliştirdim, ancak ismi spinner alt bileşenine geçirdiğimde her zaman null veya tanımsız oluyor. Spinner alt bileşeninin geçilen stringi tanımasını sağlamak için ne yapmam gerekiyor?

İşte çocuk bileşene yapılan html çağrısı:

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

Üst bileşende:

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

Alt bileşen:

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

Cevap #1

Hata alıyorsunuz çünkü bu şekilde bir değer geçirmeye çalıştığınızda: [spinName]="macroCarbs", bileşeninizde macroCarbs adında bir değişken arar. Eğer değeri [] olmadan, şu şekilde geçirirseniz: spinName="macroCarbs", o zaman çalışacaktır. Ayrıca, sayı girişlerinize değerler verirken, bunu "" olmadan yapın.

Cevap #2

Sadece [spinName]="macroCarbs"'ten []'i kaldırın:

Yani işte aldığınız şey bu:

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