Angular 为什么可以'；t我将字符串传递给@input

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

下面是对子组件的html调用：

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

在父组件中：

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

onChanged（sr：喷丝头返回）{
如果（sr.spinName==“宏碳水化合物”）{
（this.macroForm.controls['macroCarbs']）.setValue（sr.spinValue）；
}else if（sr.spinName==“宏蛋白”）{
（this.macroForm.controls['macroProtein']）.setValue（sr.spinValue）；
}else if（sr.spinName==“热量差异”）{
（此.macroForm.controls['carriodifference']）.setValue（sr.spingValue）；
}

子组件：

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

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
从“../../interfaces/SpinnerReturn”导入{SpinnerReturn}；
@组成部分({
选择器：“kg微调器”，
templateUrl:'./app/shared/spinner/kgSpinner.component.html'，
样式URL:['./app/shared/spinner/kgSpinner.component.css']
})
导出类KgSpinnerComponent实现OnInit{
@Input（）起始值：数字；
@输入（）范围：数字[]；
@Input（）增量：数字；
@输入（）spinName；
@Output（）onChanged=neweventemitter（）；
曲线值：数字；
lowerLimit：数字；
上限：数字；
名称：字符串；
sr：喷丝头返回；
构造函数（）{
this.sr=新喷丝头返回（）；
}
恩戈尼尼特（）{
this.lowerLimit=this.range[0]；
this.upperLimit=this.range[1]；
this.curve值=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.curveValue；
this.sr.spinName=this.spinName；
this.onChanged.emit（this.sr）
}
}

只需从

[spinName]=“macroCarbs”

中删除

[]

：

这就是你得到的：

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

尝试通过：

[spinName]="'macroCarbs'" 

而不是

[spinName]="macroCarbs" 

---

在html调用中，您会遇到错误，因为当您尝试像这样传递值：

[spinName]=“macroCarbs”

，它会在组件中搜索名为

macroCarbs

的变量。如果您传递值时没有

[]

，则如下：

spinName=“macroCarbs”

，然后它就会工作。另外，当您将值传递给数字输入时，请不要使用

“

”

问题出在哪里？