title: Adding Dynamic row in table, but it is emptying data in the row
body: <p>What am I doing wrong here. Need help.</p>
  
  <p>When I click on "Add" button, the data I selected in the rows of table are becoming blank. But When I select Delete button and then click on Add button, then it not emptying of one time only. If I see console, I can see data there, but it is not showing up on the screen.
  <a href="https://i.stack.imgur.com/LIEcE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LIEcE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/jFEbo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jFEbo.png" alt="enter image description here"></a>
  Here is my code:</p>
  
  <p>html:    </p>
  
  <pre><code>&lt;div class="container"&gt;
              &lt;div class="row" style="margin-bottom: 10px;"&gt;
                  &lt;div class="col"&gt;
                      &lt;div class="row111"&gt;
                          &lt;label for="Select Image" class="col-sm-311 col-form-label111"&gt;Add Threshold and Notification for this Inspection: &lt;/label&gt;
                          &lt;div class="col-sm-9"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col"&gt;
                      &lt;div class="float-right"&gt;
                          &lt;button class="btn btn-default" type="button" (click)="addNotification()"&gt;Add&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;table class="table table-striped table-bordered"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;#&lt;/th&gt;
                          &lt;th&gt;Threshold&lt;/th&gt;
                          &lt;th&gt;Notification Level&lt;/th&gt;
                          &lt;th&gt;Message&lt;/th&gt;
                          &lt;th&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;!-- &lt;tr&gt; --&gt;
                       &lt;tr *ngFor="let notification of notificationArray; let i = index"&gt;
                          &lt;td&gt;{{i+1}}&lt;/td&gt;
                          &lt;td&gt;
                              &lt;select class="form-control" maxlength="50" readonly
                                         required
                                         id="threshold"
                                         name="notification.thresholdId"
                                         [(ngModel)]="notification.thresholdId"  
                                          #threshold="ngModel" &gt;
                                          &lt;option value="0" selected&gt; Select &lt;/option&gt;
                                          &lt;option *ngFor="let threshold of thresholdList" value="{{threshold.thresholdId}}" &gt;
                                                {{threshold.threshold}}
                                          &lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input [(ngModel)]="notification.notificationLevel" required class="form-control" type="text" name="notification.notificationLevel" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input [(ngModel)]="notification.message" required class="form-control" type="text" name="notification.message" /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;button class="btn btn-default"  type="button" (click)="deleteNotification(i)"&gt;Delete&lt;/button&gt;
  
                          &lt;/td&gt;
                      &lt;/tr&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>notificationArray: Array&lt;NotificationLevel&gt; = [];
  newNotification: any = {};
  ngOnInit(): void {
      this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
      this.notificationArray.push(this.newNotification);
  }
  addNotification(index) {
  
      this.newNotification = {thresholdId: "0", notificationLevel: "", message: ""};
      this.notificationArray.push(this.newNotification);
      console.log(this.notificationArray);  // I can see all entered data in console
      return true;
  }
  
  deleteNotification(index) {
      if(this.notificationArray.length ==1) {
          alert("At least one Notification Required for an Inspection");
          return false;
      } else {
          this.notificationArray.splice(index, 1);
          return true;
      }
  }
  </code></pre>