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
});

这应该可以救您。

在更新复选框angular 2+之前，请在页面上的任何位置单击，然后视图才能工作

1 个答案: