Angular项目中Typescript向HTML传值显示[object HTMLInputElement]如何解决

问题描述 #

在Angular项目中尝试将.ts文件的数组值传递到HTML文件中渲染，原有代码如下：

HTML文件代码 #

<body>    
    <section id="login" class="d-flex justify-content-center flex-column align-items-center">        
        <form>            
            <div class="form-group">                
                <label>Firmware</label>                
                <input #firmware class="form-control" type="text" value= {{firmware}} readonly>               
            </div>            
            <div class="form-group">                
                <label>Bootloader</label>                
                <input #bootloader class="form-control" type="text" value= {{bootloader}} readonly>               
            </div>        
        </form>    
    </section>
</body>

.ts文件代码 #

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
@Component({
  selector: 'app-dual',
  templateUrl: './dual.component.html',
  styleUrls: ['./dual.component.scss']
})
export class DualComponent implements OnInit {
  title = "";
  constructor(private router: Router, private httpClient : HttpClient) { }
  ngOnInit(): void {
    var resultArray:number[] = [235,23] 
    var firmware = resultArray[0];
    var bootloader = resultArray[1];
    console.log("firmware",firmware);
    console.log("bootloader",bootloader);
  }
}

运行后console.log可以正常打印对应数值，但HTML页面输入框中显示的值为[object HTMLInputElement]。

问题原因 #

该问题由两个错误共同导致：

• 模板引用变量#firmware、#bootloader与要绑定的组件属性重名，Angular模板解析时优先读取到了input对应的DOM元素本身，插值渲染时就把DOM对象转成了字符串显示
• TS文件中ngOnInit里定义的firmware、bootloader是函数内部局部变量，没有挂载到组件实例上，模板无法读取到这两个变量的值

修复代码 #

调整后HTML代码 #

移除input上和变量重名的模板引用标记即可：

<div class="form-group">                
    <label>Firmware</label>                
    <input class="form-control" type="text" value= {{firmware}} readonly>               
</div>            
<div class="form-group">                
    <label>Bootloader</label>                
    <input class="form-control" type="text" value= {{bootloader}} readonly>               
</div>

调整后TypeScript代码 #

在组件类中提前声明实例属性，赋值时通过this.挂载到实例上，模板才能读取到：

// 组件类中提前声明属性
firmware: string = '';
bootloader: string = '';
ngOnInit(): void {
    var resultArray:number[] = [235,23]
    this.firmware = resultArray[0].toString();
    this.bootloader = resultArray[1].toString();
    console.log("firmware",this.firmware);
    console.log("bootloader",this.bootloader);
}

内容的提问来源于stack exchange，提问作者YamatoChan