title: Unable to display data in data table dynamically. ( Angular 6 )
body: <p>I am using angular data tables. I am trying to change data in them. I have 6 methods performing different calculations and pushing data into array.</p>
  
  <p>I have 6 buttons. On button click, I am calling respective method and after performing calculation. I am pushing data into array (<strong>storiesOfIndicators</strong>)</p>
  
  <p><strong>Problem Statement</strong> </p>
  
  <p>Clicking on button for first time shows table correctly but when i click next button than data is not showing properly and pagination status shows the result of first method result. Data table is not rendering properly. Basically pagination is not working</p>
  
  <p>Method 1-> </p>
  
  <pre><code>storiesWhomDefectTimeIsGreaterThanDev() {
      this.storiesOfIndicators = [];
      for (let i = 0; i &lt; this.global.data.length; i++) {
          if (this.global.data[i].defectTime &gt; this.global.data[i].devTime) {
              this.storiesOfIndicators.push(this.global.data[i])
          }
      }
  }
  </code></pre>
  
  <p><strong>My Table</strong></p>
  
  <pre><code>&lt;table id="indicators" *ngIf="storiesOfIndicators.length &gt; 0" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Story Id&lt;/th&gt;
              &lt;th&gt;Story Name&lt;/th&gt;
              &lt;th&gt;Time Spent (Days)&lt;/th&gt;
              &lt;th&gt;Estimated Time (Days)&lt;/th&gt;
              &lt;th&gt;Threshold Value&lt;/th&gt;
              &lt;th&gt;Aggregated Estimated Time (Days)&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr *ngFor="let story of storiesOfIndicators"&gt;
              &lt;td&gt;{{story.id}}&lt;/td&gt;
              &lt;td&gt;{{story.name}}&lt;/td&gt;
              &lt;td&gt;{{convertValueToDays(story.timeSpent)}}&lt;/td&gt;
              &lt;td&gt;{{convertValueToDays(story.originalEstimates)}}&lt;/td&gt;
              &lt;td&gt;{{story.threshold}}&lt;/td&gt;
              &lt;td&gt;{{convertThresholdValue(story.originalEstimates)}}&lt;/td&gt;
              &lt;td&gt;{{story.status}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Tried Solution</strong> 
  I tried to add <code>this.dtrigger.next()</code> on the start of each method but its not working.</p>
  
  <p>I again tried by calling this method at start of my method but not working either it instead remove my css/pagination/search but data is  displaying correctly. </p>
  
  <pre><code>ngAfterViewInit(): void {
      this.dtTrigger.next();
  }
  rerender() {
      this.dtElement.dtInstance.then((dtInstance: DataTables.Api) =&gt; {
          dtInstance.destroy();
          this.dtTrigger.next();
      });
  }
  </code></pre>