title: angular *ngFor not re-render html table with input
body: <p>I am stuck with a very weird issue with angular. I have created one simple array in my ts file and I am displaying a table with input by iterating the same array. Now when I change the array (reverse it) it's working fine but if I have entered something in input before changing it, text will stay in input.</p>
  
  <p>here is the code </p>
  
  <p><code>component.ts</code></p>
  
  <pre><code>    import { Component } from '@angular/core';
  
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent {
        title = 'practice';
        myArray = [1,2,3,4,5,6,7];
        change() {
          // this.myArray = [];
          this.myArray.reverse();
  
        }
      }
  </code></pre>
  
  <p>my HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;html&gt;
        &lt;table&gt;
          &lt;tr *ngFor="let item of myArray; let i = index"&gt;
            &lt;td&gt;
              &lt;input type="text" [value]='item'&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;button (click)="change()"&gt;Change&lt;/button&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>Sample video for issue explanation:
  <a href="https://www.loom.com/share/6f4887183bb94150ad7390f25e5b466a" rel="nofollow noreferrer">https://www.loom.com/share/6f4887183bb94150ad7390f25e5b466a</a></p>
  
  <p>So as you can see, when I enter something in the input and change the array the value stays with array. I have checked the original array is not changing.</p>
  
  <p>I mean it just got reversed, but nothing else.</p>
  
  <p>What is the issue?</p>