我尝试在Angular Project中将数组值从.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文件中显示它们，则文本框中的值是"0"；[对象HTMLInputElement]"；
注：我是Angular的新手，正在努力学习：(
有什么建议吗？
谢谢！
解决方案：
HTML:
<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：
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);
我删除了以前的答案，因为我完全错过了错误的地方。当你这样做时：
<input #firmware class="form-control" type="text" value= {{firmware}} readonly>
#firmware创建了一个名为firmware的新局部变量，该变量等于它所包含的HTML元素。它是显示在大括号内的新的局部变量，而不是DualComponent类中定义的变量firmware。
确保不要重复这样的变量名，问题就会消失。