Angular *NgFor生成的输入文本的值绑定问题

当尝试在角度数组上*ngFor以生成输入文本元素并绑定到数组中的值时，我面临一些问题。当用户向文本输入输入内容时，该值未正确绑定

我尝试在更新阵列后运行changeDetection，但没有帮助

在下面的代码示例中，我在使用字符串值“test”的数据数组单击add按钮时生成输入元素。输入的[ngModel]绑定到数组中的值。所以我希望所有的输入都有“test”的值

但是，当我们尝试在输入中输入一些值，然后单击add按钮时，生成的输入不会绑定到数组中的值

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
添加






数据：{data | json}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
数据=[‘测试’]；
onAdd（）{
这个.data.push（'test'）；
}
trackByfn=（索引）=>索引；
}

您必须将

[ngModel]

更改为

[（ngModel）]

以进行双向数据绑定

有关角度数据绑定的详细信息：

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`
添加






数据：{data | json}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
数据=[‘测试’]；
onAdd（）{
这个.data.push（'test'）；
}
trackByfn=（索引）=>索引；
}

更新：使用表单组

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <button (click)="onAdd()">Add</button>
    <div [formGroup]="form" *ngFor="let f of fields">
      <input type="text" [formControlName]="f" /> 
    </div>
    <div *ngFor="let f of fields">
      {{form.controls[f].value}}
    </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  form: FormGroup = new FormGroup({
    test: new FormControl('test')
  });
  fields = ['test'];
  onAdd() {
    const length = this.fields.length;
    this.fields.push('test'+length);
    this.form.addControl('test'+length, new FormControl('test'));
  } // length to dynamically name the field
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormGroup，FormControl，Validators，AbstractControl}；
@组成部分({
选择器：“我的应用程序”，
模板：`
添加
{{form.controls[f].value}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
form:FormGroup=新FormGroup({
测试：新表单控件（“测试”）
});
字段=['test']；
onAdd（）{
常量长度=this.fields.length；
此.fields.push（'test'+长度）；
this.form.addControl（'test'+长度，new-FormControl（'test'）；
}//动态命名字段的长度
}

注意：不要忘记在

app.module.ts的导入依赖项中添加
ReactiveFormsModule

我为你的闪电战分道扬镳：

工作示例

这是双向绑定语法-->
[（ngModel）]
保留变量以获取新值

  import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `

    <br/><br/>
    <input *ngFor="let d of data;let i = index;trackBy:trackByfn" 
    type="text" [value]="data[i]" [(ngModel)]="dataarray"> 
     <button (click)="onAdd(data[i])">Add</button>
    <br/><br/>
    data: {{data|json}}
      `,
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {

       data = ["ssdsdsd"];
       datatosave:any;  
      onAdd(data1) {  
        this.data.push(this.datatosave);

      }
      trackByfn = (index) => index;
    }

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
模板：`



添加



数据：{data | json}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
数据=[“SSDSD”]；
数据保存：任何；
onAdd（数据1）{
this.data.push（this.datatosave）；
}
trackByfn=（索引）=>索引；
}
使用
@ViewChildren
指令。在
onAdd（）
中，将
输入的最后一个元素推送到
数据[]
。这是同样的理由

代码：

import{Component，ViewChildren，ElementRef，
QueryList，AfterViewInit}来自“@angular/core”；
@组成部分({
选择器：“我的应用程序”，
模板：`
添加






数据：{data | json}
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
数据=[‘测试’]；
@ViewChildren（“inputRef”）输入：QueryList；
onAdd（）{
让domeElement=this.inputs.last作为ElementRef；
this.data.push（domeElement.nativeElement.value）；
}
}

有关
@ViewChildren
的更多信息，请参见。
您错过了数据的双向绑定
[（ngModel）]=“data[i]”
我们可以不进行双向绑定吗？我不希望输入修改数据，只希望单向更新。单击“添加”按钮时，所有输入都需要在数组中有值。单向绑定不是这样工作吗？@San:有什么答案对你有用吗？如果是的话，请考虑接受/鼓励他们。不需要双向绑定就可以实现吗？因为我不想通过绑定来实际更新数据。在我最初的senario中，数据来自其他来源。我正在使用ngrx并从选择器获取数据。使用FormGroup而不是双向绑定更新了我的答案。
  import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      template: `

    <br/><br/>
    <input *ngFor="let d of data;let i = index;trackBy:trackByfn" 
    type="text" [value]="data[i]" [(ngModel)]="dataarray"> 
     <button (click)="onAdd(data[i])">Add</button>
    <br/><br/>
    data: {{data|json}}
      `,
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {

       data = ["ssdsdsd"];
       datatosave:any;  
      onAdd(data1) {  
        this.data.push(this.datatosave);

      }
      trackByfn = (index) => index;
    }

import { Component, ViewChildren, ElementRef, 
         QueryList, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <button (click)="onAdd()">Add</button>
  <br/><br/>
  <input #inputRef type="text" 
  *ngFor="let d of data; let i = index; trackBy:trackByfn"> 
  <br/><br/>
  data: {{data | json}}
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = ['test'];

  @ViewChildren("inputRef") inputs: QueryList<ElementRef>;

  onAdd() {
    let domElement = this.inputs.last as ElementRef;
    this.data.push(domElement.nativeElement.value);
  }

}