Input value sticks when changing structure in angular 8 ngFor loop

Question

I am facing a weird issue in angular 8 ngFor loop.

On click of update button, weeksValueDoubleArray changes but view is corrupted with old input data. When the run the application, I change the starting values from the input boxes, and then I click update button. However, the changed value before update sticks around even after update.

Here is the html code:

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

And the typescript code is below:

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);
    }
  }
}

kshetline · Accepted Answer · 2019-10-21 19:23:37Z

2

The point mentioned above about <input type="text" [value]="weekValue"> is true, but I think you might also have another problem because you're using an array of arrays. The value weekValue in your HTML is perhaps bound to an inner array of the array of arrays, and then when you replace the outer array, the binding to the previous inner array remains in effect.

answered Oct 21, 2019 at 19:23

kshetline

14k6 gold badges49 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sarwan Over a year ago

The problem comes even with single array. This ca easily be reproduced. We take an array and display it and then we click some button which changes the array. But the new values does not come properly as the last edited text will somehow come after clicking update button.

Nguyễn Cường · Accepted Answer · 2019-10-21 19:00:22Z

0

You need to use brackets around the "value" attribute to create a property binding.

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

Whenever the weekValue changes, the input value will change accordingly

answered Oct 21, 2019 at 19:00

Nguyễn Cường

314 bronze badges

Comments

Sarwan · Accepted Answer · 2019-10-22 11:33:23Z

0

I am not sure about the problem though angular is having, but I fixed it by putting code like below:

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

The trackBY:trackItem does the job for me. In ts file it looks like below:

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

answered Oct 22, 2019 at 11:33

Sarwan

6573 gold badges10 silver badges23 bronze badges

Collectives™ on Stack Overflow

Input value sticks when changing structure in angular 8 ngFor loop

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related