如何在不改变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

标签通常与for属性一起使用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()中ngOnInit()初始化。 你不应该那样做。

Answer 2

您正在尝试在模板中调用CalculateAge函数，您应该在其中仅引用age变量。 另外，您已经声明CalculateAge具有void返回类型，因此即使可行，它仍然不会向模板返回任何内容。

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

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

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