angular - 索引“无法读取属性 'toLowerCase' of null ”时出现角度错误

Question

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

应用程序运行完美，直到我打开 if 条件employee.name，employee.phone但是当我在 if 条件下获得更多属性时开始混乱，例如employee.jobTitleand 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>

标签： angulartypescript

Answer 1

您必须将文件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
}
}