Question

嗯，这是一个小搜索应用程序，根据关键字搜索值。

应用程序运行完美，直到我将 if 条件置于 employee.name 和 employee.phone 上，但是当我在 if 条件下获得更多属性（例如 employee.jobTitle 和 employee.email）时，应用程序开始变得混乱。
我想要的是，我可以通过 name、email、phone 和 jobTitle 得到结果。

如果有人能帮助我解决我在这里遗漏的问题，非常感谢。

app.component.ts

ngOnInit() {
     this.getEmployees();
   }

   public getEmployees():void {
     this.employeeService.getEmployees().subscribe(
       (response: Employee[])=>{
         this.employees = response;
       },
       (error: HttpErrorResponse) => {
         alert(error.message);
       }
     );
   }

  public searchEmployees(key: string): void {
     console.log(key);
     const results: Employee[] = [];
     for (const employee of this.employees) {
       if (employee.name.toLowerCase().indexOf(key.toLowerCase()) !== -1
       || employee.email.toLowerCase().indexOf(key.toLowerCase()) !== -1
       || employee.phone.toLowerCase().indexOf(key.toLowerCase()) !== -1
       || employee.jobTitle.toLowerCase().indexOf(key.toLowerCase()) !== -1) {
         results.push(employee);
       }
     }
     this.employees = results;
     if (results.length === 0 || !key) {
       this.getEmployees();
     }
   }

app.component.html

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="collapse navbar-collapse" id="navbarColor02">
       <form class="form-inline my-2 my-lg-0">
        <input type="search" (ngModelChange)="searchEmployees(key.value)" #key="ngModel" 
        ngModel name="key" id="searchName" class="form-control mr-sm-2" placeholder="Search 
        employees..." required>
   </form>
   </div>
  </nav>

   
    <div *ngFor="let employee of employees" class="col-md-6 col-xl-3">
                    <p>Name: {{employee?.name}}</p>
                    <p>Job title: {{employee?.jobTitle}}</p>
                <p>Email : {{employee?.email}}</p>
                <p> Phone : {{employee?.phone}}</p>

Answer 1

错误不言自明：
如果您在 employee.email.toLowerCase() 和 employee.jobTitle.toLowerCase() 之后看到它，只需确保字段 employee.email 和 employee.jobTitle 在对它们调用 toLowerCase() 之前不为空。

可能的解决方法是：

   if (employee.name.toLowerCase().indexOf(key.toLowerCase()) !== -1
   || (employee.email && employee.email.toLowerCase().indexOf(key.toLowerCase()) !== -1)
   || employee.phone.toLowerCase().indexOf(key.toLowerCase()) !== -1
   || (employee.jobTitle && employee.jobTitle.toLowerCase().indexOf(key.toLowerCase()) !== -1))

更新关于评论中描述的第二个问题：
每次搜索后，您都会丢失原始员工数组，因为最终您会执行 this.employees = results;。
所以，下次搜索时，只在缩小的数组中进行搜索，而不是在原来的数组中进行。

为了解决这个问题，我会将原始数组保留在另一个数组中，如下所示：

allEmployees: Employees[];

初始化它而不是 this.employees：

   public getEmployees():void {
     ...
     // this.employees = response; // <- Remove this
     this.allEmployees = response; // <- Add this instead
     ...
   }

并且总是迭代所有员工而不是员工：

public searchEmployees(key: string): void {
   console.log(key);
   const results: Employee[] = [];
   for (const employee of this.allEmployees) { // <-- Replaced this.employees with this.allEmployees
     if (employee.name.toLowerCase().indexOf(key.toLowerCase()) !== -1
       || (employee.email && employee.email.toLowerCase().indexOf(key.toLowerCase()) !== -1)
       || employee.phone.toLowerCase().indexOf(key.toLowerCase()) !== -1
       || (employee.jobTitle && employee.jobTitle.toLowerCase().indexOf(key.toLowerCase()) !== -1)) {
         results.push(employee);
     }
   }
   this.employees = results;
   if (results.length === 0 || !key) {
     this.getEmployees();
   }
}

Answer 2

您必须将文件 tsconfig.json 的内容更改为

{
"compileOnSave": false,
"compilerOptions": {
 "baseUrl": "./",
 "outDir": "./dist/out-tsc",
 "sourceMap": true,
 "declaration": false,
 "downlevelIteration": true,
 "experimentalDecorators": true,
 "module": "esnext",
 "moduleResolution": "node",
 "importHelpers": true,
 "target": "es2015",
 "lib": [
   "es2018",
   "dom"
 ]
},
"angularCompilerOptions": {
 "fullTemplateTypeCheck": true,
 "strictInjectionParameters": true
}
}

索引时的角度错误“无法读取 null 的属性‘toLowerCase’”

2 个答案: