Блог

  

    <ng-template mat-tab-label>
                    <div class="input-group">
                        <div class="m-input-icon m-input-icon--right w-100">
                            <input **#searchVal** class="form-control m-input"
                                [placeholder]="tabIndex < 1 ? 'Search Customer, Building, Shift, Department, Lead' : 'Search Employee Name, Customer,Building, Shift, Department'"
                                type="text" [value]="query" (keyup)="onSearch($event)">
                            <span class="m-input-icon__icon m-input-icon__icon--right">
                                <span **[![*ngIf="!searchVal.value"][1]][1]**><i class="la flaticon-search-1"></i></span>
                                <mat-icon *ngIf="searchVal.value" class="clear-icon" (click)="onSearch($event);searchVal.value = ''; query = '';">
                                    clear
                                </mat-icon>
                            </span>
    
                        </div>
                    </div>
                </ng-template>

 

когда я ищу значение после очистки фильтра ,оно выдает ошибку, называемую

ОШИБКА Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после проверки. Предыдущее значение: «ngIf: true». Текущее значение: «ngIf: ложь».

У кого-нибудь есть идея, пожалуйста, дайте мне знать,

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

 import { ChangeDetectorRef, Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { format } from 'date-fns';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { AlertService } from 'src/app/core/services/alert.service';
import { AuthServices } from 'src/app/core/services/auth.service';
import { BreadcrumbService } from 'src/app/core/services/breadcrumb.service';
import { UserServices } from 'src/app/core/services/user.service';
import { abbvStates, cities } from 'src/app/shared/stateCityList';
import { SelectLayoutComponent } from '../entry-component/select-layout/select-layout.component';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
import * as XLSX from 'xlsx';
import { Location } from '@angular/common';
import { LumperSheetFilters } from 'src/app/shared/entry-components/modal-object/reports/lumper-sheet-filters';
import { DEPARTMENTS } from 'src/app/shared/utility/departments';

@Component({
  selector: 'app-time-clock-reports',
  templateUrl: './time-clock-reports.component.html',
  styleUrls: ['./time-clock-reports.component.scss']
})
export class TimeClockReportsComponent implements OnInit {
  isLoading: boolean = false;
  currentRole: string;
  checkselection: string = 'pdf';
  cityType: string = '';
  stateType: string = '';
  cities: any[] = cities;
  states: any[] = abbvStates;
  customerIds = [];
  buildingIds = [];
  roleType: string = '';
  filteredCities: any = [];
  query: string = '';
  department = '';
  shift = '';
  buildings = [];
  departmentOptions = DEPARTMENTS;
  rolesType = [
    { viewValue: 'District Manager', value: 'district_manager' },
    { viewValue: 'Lumper', value: 'lumper' },
    { viewValue: 'Lead', value: 'lead' },
  ];
  subscriptions: Subscription[] = [];
  searchData1$: Subject<string> = new Subject<string>();
  tabIndex = 0;
  checked: any[] = [];
  date: any = new Date();
  selectedFromDate: any;
  selectedToDate: any;
  selectShiftDepartment: boolean = false;
  alreadySelected: string[] = ['Customer', 'Buildings', 'Managers', 'Supervisors', 'Active Since'];
  parameters: string[] = ['Customer', 'Buildings', 'Managers', 'Supervisors', 'Active Since'];
  sheetsData: any;
  buildingId: string;
  customers = [];

  constructor(
    private location: Location,
    private router: Router,
    private breadcrumbService: BreadcrumbService,
    private authService: AuthServices,
    private userService: UserServices,
    private alertService: AlertService
  ) { }

  ngOnInit() {
  }

 

// this is the search function that gets called on clearing the input through clear icon

  **onSearch(event) {
    event.stopPropagation();
    let val = event.target.value;
    if (event.keyCode == 32) {
      val = val   ' ';
      this.searchData1$.next(val);
    } else this.searchData1$.next(val);
  }**

 
  back() {
    this.location.back();
  }



}



 

 let val = event.target.value ? event.target.value : ' ';
 

вам нужно проверить наличие нулевого value значения event.target