значение не обновляется в ячейке таблицы автоматически приложение 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