Question

我意识到已经有一个类似名称的问题了，但我无法弄清楚我在问类似事情的问题上做错了什么。

我在angular中创建了一个简单的复选框组件，

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'checkbox',
  templateUrl: './check-box.component.html',
  styleUrls: ['./check-box.component.css']
})
export class CheckBoxComponent implements OnInit {
  @Input() value: boolean;
  @Input() text: string;

  constructor() { }

  ngOnInit() {    
    console.log("CheckBox component");
    console.log("  " + this.text);
    console.log("  " + this.value);
  }

}

相关模板：

<div *ngIf="value === false">
    <input type="checkbox"/>
    <label class="checkbox-label">{{ text }}</label>
</div>
<div *ngIf="value === true">
    <input type="checkbox" checked/>
    <label class="checkbox-label">{{ text }}</label>
</div>

样式表：

div input[type=checkbox]
{
  transform: scale(1.5);  
  padding: 0px;
}

.checkbox-label {
    margin-left: 5px;
}

使用中的组件：

<checkbox [text]="Checkbox" [value]="true" ></checkbox>

我遇到一个问题，我的CheckBox组件的text属性总是未定义的。我尝试修改类，删除第一个@Input（），但问题仍然存在。这里有什么明显的东西会导致组件无法正确获取属性值吗？

编辑：

在评论和答案中指出这是一个新手的错误。

Answer 1

您的问题是以下表达式[text]="Checkbox"，您将变量checkbox绑定到text输入。

我认为您希望将输入值设置为字符串，因此您必须使用[text]="'Checkbox'"或text="Checkbox"。

请注意，您的组件模板不是最佳的，您可以根据值设置checked属性。

<input type="checkbox" [checked]="value" />
<label class="checkbox-label">{{ text }}</label>

除此之外，您应该阅读 ngIf -directive的文档，因为您可以轻松使用ngIfElse语法。

角度输入属性未定义

1 个答案: