Angular - 如何修复“类型上不存在属性”错误？答案

【问题标题】：Angular - How to fix 'property does not exist on type' error?Angular - 如何修复“类型上不存在属性”错误？
【发布时间】：2018-09-27 19:14:39
【问题描述】：

我正在关注this video tutorial (text version of the same)。我遵循了完全相同的代码，我收到了这个错误：

错误 TS2339：类型上不存在属性“getEmployees” '员工服务'

我在 Internet 上查看并访问了 Stack Overflow 上的许多问题，例如 this、this、this 和 this，以及在 GitHub 上打开了与此错误相关的许多其他问题。

服务：

//import statements go here ...

@Injectable()
export class EmployeeService {
private listEmployees: Employee[] = [
    {
      //just to avoid longer code, deleted dummy data.
    },
  ];

  getEmployees(): Employee[] {
      return this.listEmployees; //ERROR in src/app/employees/list-employees.component.ts(14,44)
  }
}

组件类：

//import statements
@Component({
    selector: 'app-list-employees',
    templateUrl: './list-employees.component.html',
    styleUrls: ['./list-employees.component.css']
})
export class ListEmployeesComponent implements OnInit {
    employees: Employee[];
    constructor(private _EmployeeService: EmployeeService) { }

    ngOnInit() {
        this.employees = this._EmployeeService.getEmployees();
    }

}

我已在app.module.ts 中导入服务并将其添加到ngModule 的提供者数组中。

我无法解决错误，也无法理解导致此错误的原因。

【问题讨论】：

你能放 plunker 或 stackblitz 吗？这将有助于更好地调试您的代码
确切的错误是什么？你能发布完整的错误吗？不要只是在代码中添加注释，将人们指向该行并期望其他人知道错误到底是什么。
我已经提到了问题本身的错误。
这种行为也发生在 ionic 4 CLI 中。因此，如果缺少服务，它的成员会重新启动 ionic serve 会有所帮助。

标签： angular typescript

【解决方案1】：

这通常发生在您开发 Angular 应用程序时。要解决这个问题，只需关闭服务器并重新启动它：

$ ng serve

说明

这是因为当您启动应用程序时，服务器实际上正在为存储在 dist 文件夹中的包（JavaScript/CSS/HTML...输出文件）提供服务。有时，当您对代码进行更改时，这些更改不会反映在您的包中，这将导致服务器仍在使用旧包。

【讨论】：

我不敢相信简单的重启会奏效。我在这里和那里看了很多，并试图更改代码。你能说出为什么会有这样的行为吗？
@GauravChauhan 我突然遇到这个问题，重新启动我的 IDE 和 ng serve 并不能解决这个问题
@LennyD 你能发布更多细节以便人们查看吗？

【解决方案2】：

如果你想避免编译警告，那么肮脏的修复就是 make

employees: any[];

任何实例都允许任何方法调用该对象的任何方法。这将避免编译警告，但它不是运行时安全的。

在使用它之前你需要小心。如果您确定该方法将在运行时可用，则仅使用它。

【讨论】：

【解决方案3】：

在方法声明中使用静态关键字：

 public static getEmployees(): any []{

}

【讨论】：

【解决方案4】：

我也会订阅服务方法，而不是将其保存到ngOnInit() 中的另一个值：

ngOnInit() {
    this.employees = this._EmployeeService.getEmployees();
}

类似于：

ngOnInit(){
   this.getEmployees()
}

private getEmployees(): void {
    this._EmployeeService.getEmployees()
        .subscribe(fetchedEmployees = > this.employees = fetchedEmployees)
}

【讨论】：

【解决方案5】：

如果上面提到的所有事情都检查了，检查

constructor(private _employeeService: EmployeeService) { }

private，访问说明符就在那里。错过访问说明符时也会出现同样的问题。

【讨论】：

【解决方案6】：

如果你使用命令ng servecommand 并且构建成功。

然后，使用命令ng build --prod失败，智能感知是正确的。

您可能在使用源代码时遇到问题。

对于enviroment config，不同的configuration会使用不同的文件，都在angular.json中。

By default ,environment.ts 将替换为 environment.prod.ts

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    ...

所以，根据你的配置，你必须修改className.prod.ts，比如className.ts。

【讨论】：

【解决方案7】：

有些时候文件没有保存..所以，保存所有文件或者你可以关闭所有文件（会提示你保存..）并重新构建..为我工作..

【讨论】：