NgIf не обновляется при изменении переменной - PullRequest
Новая
       22

NgIf не обновляется при изменении переменной

0 голосов
/ 11 апреля 2019

Я пытаюсь реализовать стрелки сортировки вверх и вниз на основе типа сортировки столбца.Функция сортировки работала очень хорошо, когда я нажимал на заголовок каждого столбца.Однако у меня проблема с 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.Более того, когда я нажимаю другой заголовок, предыдущий заголовок со стрелкой должен исчезнуть.

...