Question

使用Angular 4（打字稿），我有以下HTML代码：

 <div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
      <form style="width: 100%; height: 100%">
        <textarea id="tsn_list" style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
      </form>
    </div>

我正在尝试使用以下内容将用户输入的数据输入textarea：

public parseTSNs(){
    let tsnString = document.getElementById("tsn_list").value;
    console.log("User inputted string: " + tsnString);
}

此功能由按钮调用。

由于以下原因，代码未编译：

Property 'value' does not exist on type 'HTMLElement'

这应该是一个简单的功能。我究竟做错了什么？ W3schools“从textarea获取价值”显示'.value'是必需的功能！

Answer 1

您必须声明元素的类型为HTMLTextAreaElement。因为document.getElementById返回HTMLElement并且并非所有html元素都具有value属性：

let tsnString = (document.getElementById("tsn_list") as HTMLTextAreaElement).value;

但是当你使用Angular时，你可能应该使用数据绑定而不是自己查询值

Answer 2

在设置表格中单元格的值时，我遇到了类似的问题。

我添加的数据如下：

document.getElementById("table_id").rows[0].cells[0].innerHTML = "data_to_be_added";

我收到以下错误：

错误TS2339：类型“ HTMLElement”上不存在属性“行”

类型“ HTMLElement”上不存在属性“单元格”

所以我添加了以下标记，并且错误得到解决。

(document.getElementById("table_id") as any).rows[0].cells[0].innerHTML = "data_to_be_added";

在这里，您要明确地将变量的类型更改为任意。

Answer 3

您应该使用：[(ngModel)]='yourValue'将数据绑定到控制器。 Textarea不使用value参数。

请阅读有关HTML标记及其属性hire的更多信息。

Answer 4

虽然它不应该像那样工作，如果你想这样做，首先给你的标签一个#的参考：

<div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
    <form style="width: 100%; height: 100%">
        <textarea #myTA style="width: 100%; height: 100%" type="text" name="tsn_list" placeholder="e.g. 2001311,2425302,2153542,2435974"></textarea>
    </form>
</div>

然后，在您的组件中，导入：

import {ViewChild, ElementRef } from '@angular/core';

声明与您的引用匹配的变量：

@ViewChild('myTA') myTextArea: ElementRef;

在你的方法中：

parseTSNs() {
    let el = this.myTextArea.nativeElement as HTMLElement;
    console.log(el.value);
}

对于Textarea - Angular，类型'HTMLElement'上不存在属性'value'

4 个答案: