title: how do i delete correct object after mat sorting?
body: <p>i have delete click listener where i pass index and id from my data source, but after sorting index changes and when i click delete the item is delete from database with id but in ui different item is spliced because of index change after sorting </p>
  
  <p>this is my html file</p>
  
  <pre><code>&lt;ng-container matColumnDef="delete"&gt;
              &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Delete &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let row; let i = index;"&gt;
                &lt;button mat-mini-fab color="warn" (click)="delete(row?.id, i + (paginator.pageIndex * paginator.pageSize))"&gt;
                  &lt;mat-icon&gt;delete&lt;/mat-icon&gt;
                &lt;/button&gt;
              &lt;/td&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>this is my ts code</p>
  
  <pre><code>delete(id, index) {
      var flag = confirm("Do you want to delete?");
      if (flag){
        this.productsServ.delete(id, index);
      }
    }
  </code></pre>
  
  <p>this my service file code</p>
  
  <pre><code>delete(id, index) {
      this.http.delete('http://localhost:8000/api/product/'+id).subscribe(
        res =&gt; {
          this.snackBar.open('Deleted.', 'Dismiss', {duration: 3000});
          this.products.splice(index, 1);
          this.productsChanged.next(this.products);
        }
      );
    }
  </code></pre>