表格单元格中的值不会自动刷新angular6应用程序

Question

一旦用户单击行中可用的取消按钮，我想更新给定表格单元的状态，它应该将状态更新为“已取消”，以下是HTML代码。

按钮代码

<button class="btn btn-primary-bordered btn-bordered btn-sm size" (click)="reloadBlotterData(data)">Reresh</button></p>
        </div>

表格行HTML

 <div class='table_small'>
            <div class='table_cell'>Status</div>
            <div class='table_cell'>
              <p class="status" >{{data.orderStatus}}</p></div></div>

.ts文件方法

 reloadBlotterData(data:orderItem){
       this.cancelService.loadData(this.data) //coming from other stuff
       .pipe(finalize(() => data.status = 'Cancelled')).subscribe(data =>console.log(JSON.stringify(data)));
       this.ref.detectChanges()
   }

这很好用，但是我需要单击两次按钮以使表格单元格中的状态被取消，请确定出现了什么问题，我不确定如何在这里使用detectChanges（）。

请注意，这里的“数据”以数组形式出现，并使用* ngFor

进行操作