Вид не работает до тех пор, пока не произойдет щелчок в любом месте страницы при обновлении флажка угловой 2+

Question

Я использую Angular 7 в моем приложении.У меня есть функциональность для отображения контента на основе выбранного флажка.Все работает нормально, но после установленного флажка или непроверенного содержимого кажется обновленным, но щелчок не работает, пока щелчок не зарегистрирован где-либо на странице.

Пожалуйста, проверьте код ниже.

<div class="col filter_container mb-3 d-table py-2 py-md-0">
          <span class="font-arial-13 font-weight-bold d-table-cell d-lg-inline-block filterKey">Filters:</span>
          <span class="d-table-cell d-lg-inline-block pl-3 filterContent">
            <span class="filterItem">
              <label class="container_check font-arial-13 mr-4">{{filterArray[filterItem][0].value}}
                <input type="checkbox" [(ngModel)]="filterArray[filterItem][0].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][0].name, filterArray[filterItem][0].selected, filterItem);">
                <span class="checkmark"></span>
              </label>
            </span>
            <span class="filterItem">
              <label class="container_check font-arial-13 mr-4">{{filterArray[filterItem][1].value}}
                <input type="checkbox" [(ngModel)]="filterArray[filterItem][1].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][1].name, filterArray[filterItem][1].selected, filterItem);">
                <span class="checkmark"></span>
              </label>
            </span>
            <span class="filterItem">
              <label class="container_check font-arial-13 mr-4">{{filterArray[filterItem][2].value}}
                <input type="checkbox" [(ngModel)]="filterArray[filterItem][2].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][2].name, filterArray[filterItem][2].selected, filterItem);">
                <span class="checkmark"></span>
              </label>
            </span>
            <div class="d-inline-block filterBg">
              <span class="d-inline-block">
                <span class="font-arial-13 d-inline-block mr-3 mr-md-0"><span class="fas fa-circle blueDot"></span>{{filterArray[filterItem][5].value}}</span>
              </span>
              <span class="d-inline-block">
                <label class="container_check font-arial-13 mr-3"><span class="fas fa-circle greenDot"></span>{{filterArray[filterItem][3].value}}
                  <input type="checkbox" [(ngModel)]="filterArray[filterItem][3].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][3].name, filterArray[filterItem][3].selected, filterItem);">
                  <span class="checkmark"></span>
                </label>
              </span>
              <span class="d-inline-block">
                <label class="container_check font-arial-13 mr-3"><span class="fas fa-circle orangeDot"></span>{{filterArray[filterItem][4].value}}
                  <input type="checkbox" [(ngModel)]="filterArray[filterItem][4].selected" (ngModelChange)="getCheckedItem(filterArray[filterItem][4].name, filterArray[filterItem][4].selected, filterItem);">
                  <span class="checkmark"></span>
                </label>
              </span>
            </div>
          </span>
        </div>

Выше приведены параметры фильтра, пожалуйста, проверьте ниже содержимое, которое будет отображаться на основе фильтра

<td *ngFor="let saColumn of smartColumnName">
                  <div *ngIf="main[saColumn.columnName]">
                    <div *ngFor="let item of parseData(main[saColumn.columnName])">
                      <div *ngIf="item.normal">
                        <ul class="normal pl-0">
                          <li *ngFor="let list of item.normal" class="dotsBlue_smart_intel position-relative">
                            <a [routerLink]="list.link">{{list.text}}</a>
                          </li>
                        </ul>
                      </div>
                      <div *ngIf="item.client && (filterArray[filterItem][3].selected || filterArray[filterItem][0].selected )">
                        <ul class="client pl-0">
                          <li *ngFor="let list of item.client" class="dotsGreen_smart_intel position-relative">
                            <a [routerLink]="list.link">{{list.text}}</a>
                          </li>
                        </ul>
                      </div>
                      <div *ngIf="item.thirdP && (filterArray[filterItem][4].selected || filterArray[filterItem][0].selected )">
                        <ul class="thirdP pl-0">
                          <li *ngFor="let list of item.thirdP" class="dotsOrange_smart_intel position-relative">
                            <a [routerLink]="list.link">{{list.text}}</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </td>

КогдаЯ обновляю флажок, кажется, вид обновлен.Но страница не перенаправляется на первый клик.Это работает для второго клика.

Пожалуйста, помогите мне решить проблему.

Answer 1

Вероятно, основная причина в том, что в вашем файле .ts некоторые детали запускаются снаружи или внутри угла.

Прочитайте эту статью и попытайтесь понять Зону в угловых: https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html

Опять же, вероятно, вам нужно что-то вроде:

this.zone.runOutsideAngular(() => {
  // do what you do outside angular affected by your template
});

или

this.zone.run(() => {
  // do what is done outside angular effecting your template
});

Это должно спасти тебя.