我为我的应用程序开发了一个触摸友好的微调器,但是当我将名称传递给微调器子组件时,它始终为 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)
}
}
最佳答案
您收到错误是因为当您尝试像这样传递值时:[spinName]="macroCarbs"
,它会在您的组件中搜索名为 macroCarbs
的变量。如果您在没有 []
的情况下传递值,例如:spinName="macroCarbs"
,那么它将起作用。此外,当您将值传递给数字输入时,请不要使用 ""
。
关于angular - 为什么我不能将字符串传递给@input,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39270374/