Question

在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中声明的标准编号

因此，我最终得到了一个文本字段列表，所有文本字段都具有myId1，myId2等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;。

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

谢谢

Answer 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
 }

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

1 个答案:

html

ts