如何在Angular中没有值错误的情况下更改标签的输入？

Question

我尝试更改标签的输入，但会在值中生成错误

这是我的代码

这是html

<div class="row">
  <div class="small-6 columns">
    <label>Edad</label>
  </div>
  <div class="small-2 columns">
    <input readonly type="text" [value]="CalculateAge()">
  </div>
</div>

这是你用密封件改变的方式吗？

<div class="small-6 columns">
  <label readonly for="text" [value]="CalculateAge()">
        </label>
</div>

这是组件

export class DatosPersonalesComponent implements OnInit {
  @Input()
  datosDTO: DatosDTO;

  public age: number;

  constructor() {}

  ngOnInit() {
    this.datosDTO = new DatosDTO();
  }
  CalculateAge(): void {
    if (this.datosDTO.datosPersonales.fechaNacimiento) {
      var timeDiff = Math.abs(Date.now() - this.datosDTO.datosPersonales.fechaNacimiento);
      this.age = Math.ceil((timeDiff / (1000 * 3600 * 24)) / 365);
    }
  }
}

这是错误

非常感谢你的帮助。

Answer 1

label通常与for属性一起使用，如此

<label for="age">{{ age }}</label>
<input type="text" id="age">

值应该在标记之间，而不是value属性

get age(){
    if (this.datosDTO.datosPersonales.fechaNacimiento) {
      var timeDiff = Math.abs(Date.now() - this.datosDTO.datosPersonales.fechaNacimiento);
      return Math.ceil((timeDiff / (1000 * 3600 * 24)) / 365);
    }
  }

您在课堂内的功能通常不应大写

calculateAge()

您将datosDTO指定为@Input()，但您已在ngOnInit()初始化它。你不应该这样做。

Answer 2

您正尝试在模板中调用CalculateAge函数，您应该在其中引用age变量。此外，您已声明CalculateAge具有void返回类型，因此即使它可以工作，它仍然不会返回模板中。

当您在onInit中调用CalculateAge（）时，它会将值加载到age变量中，然后将该变量加载到模板中。

最后，要解决实际错误，您需要在label标签内传递变量，而不是设置标签的value属性：

<div class="small-6 columns">
  <label readonly for="text">{{age}}</label>
</div>