NgIf在变量更改时不更新

Question

我正在尝试根据列的排序类型上下实现排序箭头。当我单击每一列的标题时，排序功能就可以正常工作。但是，我遇到了Angular7 NgIf的问题。我目前正在遵循Udemy上有关Angular和ASP.NET核心的说明。但是，航向中的角度版本已过时。我的代码在课程中是相同的，但只是无法正常工作。第一次单击列标题时，它确实显示了箭头，但是当我重新单击它时，箭头并没有变为相反的箭头。

我还控制台记录变量以确保它已更改，但ngIf只是不更新​​。当我单击每列的标题时，表格的排序会很好。

<thead>
        <tr>
            <th *ngFor="let c of columns">
                <div *ngIf="c.isSortable" (click)="sortBy(c.key)">
                    {{ c.title }}
                    <i *ngIf="query.sortBy == c.key" 
                    class="fas"
                    [class.fa-sort-up]="query.isSortAscending"
                    [class.fa-sort-down]="!query.isSortAscending"
                    ></i>
                </div>
                <div *ngIf="!c.isSortable">
                    {{ c.title }}
                </div>
            </th>
        </tr>
    </thead>

columns = [
    { title: 'Id' },
    { title: 'Make', key: 'make', isSortable: true },
    { title: 'Model', key: 'model', isSortable: true },
    { title: 'Contact Name', key: 'contactName', isSortable: true },
    { }
  ];

populateVehicles() {
    this.vehicleService.getVehicles(this.query)
      .subscribe(ms => this.vehicles = ms);
  }


sortBy(columnName) {
    if (this.query.sortBy === columnName) {
      this.query.IsSortAscending = !this.query.IsSortAscending;
    } else {
      this.query.sortBy = columnName;
      this.query.IsSortAscending = true;
    }
    this.populateVehicles();
  }

我希望当我单击每一列的标题时，它应该根据IsSortAccending或！IsSortAccending显示箭头。此外，当我单击其他标题时，带有箭头的上一个标题应该消失。