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"，那么它将起作用。此外，当您将值传递给数字输入时，请执行此操作而不使用""。

Answer 2

只需从[]

中删除[spinName]="macroCarbs"即可

所以这就是你得到的：

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

Answer 3

尝试通过：

[spinName]="'macroCarbs'"

而不是

[spinName]="macroCarbs"

在你的html电话中

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

3 个答案: