Question

我试图定义一个model并用html表示。这是我的代码：

'user.model.ts'

export class User{
  private name: string;


  constructor($name: string){
    this.name = $name;
  }


    public get $name(): string {
        return this.name;
    }


    public set $subject(value: string) {
        this.name = value;
    }
}

component.ts

myUsers: Array<User>;

ngOnInit(){
   //api call 
   this.myUsers= resultFromAPi;
}

component.html

<div *ngFor="let user of myUsers">
    {{user.name}}
</div>

现在，尽管在用户界面中，我仍然可以看到该名称，并且可以正常使用。但是同时在我的代码编辑器（VS代码）中，我看到一个错误：

[Angular] Identifier 'name' refers to a private member of 'User'

我知道我可以通过将字段设置为公开来解决错误，但是我认为这是错误的设计。

更新

{{user.$name}}甚至不在用户界面上显示名称

Answer 1

那么，当您定义名为{{user.name}}的公共获取方法时，为什么模板代码包含$name？

{{user.name}}

应该是

{{user.$name}}

或更改您的User类成员名称。其他对我来说没有意义的代码是调用您的setter $subject。如果在您创建代码后我继承了您的代码或必须在模板中执行某些操作，这会使我感到困惑。为您的字段和访问属性使用直观一致的名称。

我个人可能会有一个公共领域name 或一个带有公共获取者$name的私有领域name。

纯粹出于这种问题的趋势，似乎您未显示的代码存在问题，我建议您仅基于传入的json创建一个接口，然后从服务中返回该接口。

import { HttpClient } from '@angular/common/http';

export interface IUser {
  name: string;
}

export class UserService {

  constructor(private httpService: HttpClient) {}
  getUsers(): Observable<IUser[]> {
     return this.httpService.get<IUser[]>('your user end point here');
  }
}

Answer 2

当我们使用AOT（提前）编译器时，所有模板成员（例如属性和方法）必须在公共位置定义。如果要使用提前编译，则无法访问模板中的私有属性。

标识符是指私有成员

2 个答案: