通过id获取元素 - Angular2

Question

我有一段代码:

document.getElementById('loginInput').value = '123';

但是在编译代码时，我收到以下错误：

属性值在HTMLElement类型上不存在。

我已经声明了一个变量：value: string;

我该如何避免这个错误？

谢谢。

- Natalia

---

似乎你想要通过id获取一个组件，而不是元素。但是这种操作是不被支持的。 - Günter Zöchbauer

提供一些更多的代码。 - Bo Vandersteene

@GünterZöchbauer 我该如何捕获这个元素？<input type='text' id='loginInput'/>？ - Natalia

如果您正在使用Angular 2，您可以使用其数据绑定功能在此处。 - Suraj Rao

不要那样做，只需按照angular.io绑定教程进行操作即可...那里有很多示例。 - Alex Beugnet

Answer 1

如果您想设置值，那么您可以在单击或某个事件触发时在某个函数中执行相同的操作。

同时，您可以使用像这样的本地变量使用ViewChild来获取值

<input type='text' id='loginInput' #abc/>

并可以像这样获得价值

this.abc.nativeElement.value

这里是工作示例

更新

好的，明白了，你需要像这样使用angular2的ngAfterViewInit方法来实现相同的功能。

ngAfterViewInit(){
    document.getElementById('loginInput').value = '123344565';
  }

ngAfterViewInit不会抛出任何错误，因为它会在模板加载后渲染。

- Pardeep Jain

---

有趣。这在Angular 6中是真的吗？ - Gel

是的，对于Angular 6也是如此。 - Soumya Kanti

这是在Angular中首选的方式吗？它在Angular 7中也可以工作，但我不确定这是否是Angular处理此问题的方式。 - skydev

显然不是@skydev，但根据问题要求我回答了这个问题。 - Pardeep Jain

Answer 2

(<HTMLInputElement>document.getElementById('loginInput')).value = '123';

Angular无法直接使用HTML元素，因此您需要通过将上述通用绑定到它来指定元素类型。

更新：

这也可以使用ViewChild和#localvariable完成，如这里所示。

<textarea  #someVar  id="tasknote"
                  name="tasknote"
                  [(ngModel)]="taskNote"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color: pink"
                  (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} 

</textarea>

---

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
      console.log(this.rd); 
      this.el.nativeElement.focus();      //<<<=====same as oldest way
}

---

- Gopherine

Answer 3

另一种方法是使用“Angular的方式”，使用ngModel并完全跳过document.getElementById('loginInput').value = '123';。而是：

<input type="text" [(ngModel)]="username"/>
<input type="text" [(ngModel)]="password"/>

在您的组件中，您可以提供这些值：

username: 'whatever'
password: 'whatever'

这将在导航到页面时预设用户名和密码。

- AT82

---

如果我必须从外部JavaScript文件向Angular组件表单字段传递值怎么办？ 这就是我所做的，我在JavaScript文件中编写了一个算法，当算法完成生成值时，使用此代码将其传回Angular表单：getDocumentById('input').value = someValue; 但是，当我尝试在OnSubmit（）事件中检索值时，我得到了未定义的值。 有什么想法吗？ - DavidB

Answer 4

完整的Angular方式（通过Id设置/获取值）：

// 在HTML标签中

 <button (click) ="setValue()">Set Value</button>
 <input type="text"  #userNameId />

// 在组件的 .ts 文件中

    export class testUserClass {
       @ViewChild('userNameId') userNameId: ElementRef;

      ngAfterViewInit(){
         console.log(this.userNameId.nativeElement.value );
       }

      setValue(){
        this.userNameId.nativeElement.value = "Sample user Name";
      }



   }

- Imranmadbar