角度6中的“ HTML元素上不存在值”错误

时间:2018-10-28 17:50:21

标签: angular types angular6 element getelementbyid

在angular 6中,我的模板中使用以下语法

<form [formGroup]="eventEditForm" (ngSubmit)="formSubmit()"  >  
    <div *ngFor='let item of array;let i = index'>                    
       <input id ='myId{{i}}' type="text" value='{{item.name}}' >  
       <button type="button" (click)='edit(item.id,i)' >save</button>                
    </div>     

    <input type="text"  formControlName="eventType"  >                    
    <button type="submit" >Submit</button>                    
 </form>  

这是在表单内部,但是我没有用ngFor设置formControlName的文本字段,在我的反应形式中,我做了

  eventEditForm= this.formBuilder.group({        
    eventType:['']
  });

由于通过array生成整个文本字段列表的ngFor是动态的,因此我没有在formBuilder中声明的标准编号

因此,我最终得到了一个文本字段列表,所有文本字段都具有myId1myId2等ID。

然后在打字稿中做

 edit(id,i){
   let name = document.getElementById ( 'myld'+i ).value;
   console.log('name  ', name); 
 }

这有效,我可以获取每个文本字段的当前值。

我没有收到任何错误,但是VisualStudio代码标记了value的{​​{1}},并且消息显示let name = document.getElementById ( 'myld'+i ).value;

这是什么意思,我该如何解决?该代码可以正常工作,但我仍然想删除该警告。

谢谢

1 个答案:

答案 0 :(得分:1)

您的实现几乎没有问题,例如您不建议直接访问DOM元素。您可以将实现更改为-

html

<div *ngFor='let item of array;let i = index'>                    
   <input type="text" [(ngModel)]='item.name' >  
   <button type="button" (click)='edit(item)' >save</button>                
</div> 

ts

edit(item){
   //let name = document.getElementById ( 'myld'+i ).value; //<-- this is not required.
   console.log('name  ', item.name);  //<-- you can use item for editing
 }