在角度 8 ngFor 循环中更改结构时输入值保持不变答案

【问题标题】：Input value sticks when changing structure in angular 8 ngFor loop在角度 8 ngFor 循环中更改结构时输入值保持不变
【发布时间】：2019-10-21 18:38:40
【问题描述】：

我在 Angular 8 ngFor 循环中遇到了一个奇怪的问题。

单击更新按钮后，weekValueDoubleArray 发生变化，但视图因旧输入数据而损坏。运行应用程序时，我从输入框中更改起始值，然后单击更新按钮。但是，即使在更新之后，更新前的更改值仍然存在。

这是html代码：

<div class="table-responsive mb-4 mt-4">
  <button (click)="update()">update</button>

  <table class="table table-bordered custom-table" id="mytable">
    <tr id="headerRow">
      <ng-container *ngFor="let wk of arrayOfWeeks;let i=index">
        <th id="arrayWks{{i}}">{{wk}}</th>
      </ng-container>
    </tr>
    <ng-container id="ngId" *ngFor="let currSample of currentSamples;let in=index">
      <tr>
        <ng-container *ngFor="let weekValue of weeksValueDoubleArray[in];let i=index">
          <td>
            <input type="text" value={{weekValue}}>
          </td>
        </ng-container>
      </tr>
    </ng-container>
  </table>
</div>

打字稿代码如下：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  public currentSamples: string[];
  public arrayOfWeeks: string[];
  public weeksValueDoubleArray: string[][];
  public weeksValue: string[];
  constructor() { }

  ngOnInit() {
    this.currentSamples = new Array();
    this.currentSamples.push("0", "1", "2", "3", "4");
    this.populateWeeksValue();
    this.arrayOfWeeks = new Array();
    for (var i = 1; i <= 54; i++) {
      if (i < 10) {
        this.arrayOfWeeks.push("WW0" + String(i));
      }
      else {
        this.arrayOfWeeks.push("WW" + String(i));
      }
    }
  }

  update() {
    this.weeksValueDoubleArray = [];
    for (let ind = 0; ind < this.currentSamples.length; ind++) {
      this.weeksValue = new Array();
      for (var i = 1; i < 54; i++) {
        let value = "";
        if (i > 31 && i < 40) {
          value = "yes";
        }
        this.weeksValue.push(value);
      }
      this.weeksValueDoubleArray.push(this.weeksValue);
    }
  }
  populateWeeksValue() {
    this.weeksValueDoubleArray = [];
    for (let ind = 0; ind < this.currentSamples.length; ind++) {
      this.weeksValue = new Array();
      for (var i = 1; i < 54; i++) {
        let value = "";
        if (i > 21 && i < 30) {
          value = "yes";
        }
        this.weeksValue.push(value);
      }
      this.weeksValueDoubleArray.push(this.weeksValue);
    }
  }
}

【问题讨论】：

标签： angular ngfor

【解决方案1】：

上面提到的关于<input type="text" [value]="weekValue"> 的观点是正确的，但我认为您可能还会遇到另一个问题，因为您使用的是数组数组。您的 HTML 中的值 weekValue 可能绑定到数组数组的内部数组，然后当您替换外部数组时，与 previous 内部数组的绑定仍然有效。

【讨论】：

即使是单个数组也会出现问题。这很容易被复制。我们获取一个数组并显示它，然后我们单击一些按钮来更改数组。但是新值没有正确出现，因为最后编辑的文本会在单击更新按钮后以某种方式出现。

【解决方案2】：

您需要在“value”属性周围使用方括号来创建属性绑定。

 <input type="text" [value]="weekValue">

每当weekValue发生变化时，输入值也会随之变化

【讨论】：

【解决方案3】：

虽然 angular 有问题，但我不确定这个问题，但我通过输入如下代码解决了这个问题：

<ng-container *ngFor="let weekValue of weeksValueDoubleArray;let i=index;trackBy: trackItem">
          <td>
            <input type="text" [value]="weekValue">
          </td>
 </ng-container>

trackBY:trackItem 为我完成了这项工作。在 ts 文件中如下所示：

trackItem (index, item) {
return this.weeksValueDoubleArray ? this.weeksValueDoubleArray : undefined;   }

【讨论】：