angular - 为什么我不能将字符串传递给@input

Question

我为我的应用程序开发了一个触摸友好的微调器，但是当我将名称传递给微调器子组件时，它始终为 null 或未定义。我需要做什么才能让微调器子组件识别传入的字符串？

这是对子组件的 html 调用:

<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"，它会在您的组件中搜索名为 macroCarbs 的变量。如果您在没有 [] 的情况下传递值，例如:spinName="macroCarbs"，那么它将起作用。此外，当您将值传递给数字输入时，请不要使用 ""。