时间戳

首页 > 解决方案 > 链接到Angular中数组的输入值的行为不一致

arrays - 链接到Angular中数组的输入值的行为不一致

问题描述

我在 Angular 组件中使用一组数字，使用 *ngFor 链接到 html 模板中的一系列输入。当在给定输入上检测到更改时，将更新数组中相应单元格的值。我检查了它，组件中数组的值已正确更新。

但是，给定输入上的新值有时会影响另一个输入中显示的值（即新值也写入该输入中）。这通常发生在初始值相同的不同输入上。它似乎也总是在受影响的循环中更进一步的输入。

更奇怪的是，如果我将数组的值显示为纯文本，显示的值总是正确的。

我还手动为输入设置了唯一名称和 ID，以避免任何可能的混淆，但没有结果。

我做了一个小的 jsfiddle 代码来显示这个问题。如果您将第一个输入值更改为“2”，则该问题立即可见：第二个输入也将看到其值更改为“2”。jsfiddle 使用的是 Angular 4，我已经使用 Angular 6 进行了测试，但它也不起作用。

知道我可能做错了什么或问题出在哪里吗？

let { Component, NgModule, OnInit } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let v of values; let i = index;" style="float: left;"><input type="text" name="input-{{i}}" [value]="v" (change)="onChange(i, $event)"/><p>{{ v }}</p></div>
  `,
})
class HomeComponent implements OnInit {
	  public values: number[] = [];
		n = 5;
    
    ngOnInit() {
        for(let i = 0; i < this.n; i++)
        	this.values.push(1);
    }
    
    onChange(i: number, event)
    {
    	this.values[i] = parseInt(event.target.value);
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div *ngFor="let v of values; let i = index;" style="float: left;">
  <input type="text" name="input-{{i}}" [value]="v" (change)="onChange(i, $event)"/>
  <p>{{ v }}</p>
 </div>

标签： arraysangularinputngfor

解决方案

使用（输入）而不是（更改）可以工作 

let { Component, NgModule, OnInit } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <div *ngFor="let v of values; let i = index;" style="float: left;"><input type="text" name="input-{{i}}" id="input-{{i}}" value="{{v}}" (input)="onChange($event,i)"/><p>{{ v }}</p></div>
  `,
})
class HomeComponent implements OnInit {
      public values: number[] = [];
        n = 5;

    ngOnInit() {
        for(let i = 0; i < this.n; i++)
            this.values.push(1);
    }
    // event first
    onChange(event,i: number)
    {
        this.values[i] = parseInt(event.target.value);
      console.log(event)
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);

建议使用 [(ngModel)] 代替 value ，(ngModelChange) 代替 (change)，不要混用

推荐阅读