【问题标题】:Identifier refers to a private member in angular标识符是指角度中的私有成员
【发布时间】:2018-07-04 00:10:23
【问题描述】:

我正在尝试以角度定义 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>

现在,虽然在 UI 中,我可以看到名称并且它运行良好。但同时在我的代码编辑器(VS 代码)中,我看到了一个错误:

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

我知道我可以通过公开这些字段来修复错误,但我认为那是糟糕的设计。

更新

{{user.$name}} 甚至没有在 UI 上显示名称

【问题讨论】:

    标签: angular


    【解决方案1】:

    那么,当您定义一个名为 $name 的公共 getter 时,为什么您的模板代码包含 {{user.name}}

    {{user.name}}
    

    应该是

    {{user.$name}}
    

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

    就我个人而言,我应该有一个公共字段 name 一个私有字段 $name 和公共 getter 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');
      }
    }
    

    【讨论】:

    • 我试过了,在那种情况下,我什至没有在 UI 上得到名字
    • {{user.$name}} does not even show the name on UI user 类型有关。除非您分享 resultFromAPi 中发生的事情,否则我无法帮助您。所以我上面的回答解决了你问的问题,@helloworld。
    • 在组件中初始化你的数组myUsers: Array&lt;User&gt;=[];:)
    • @Vikas - 肯定是对这个问题的一个很好的评论(但不是这个答案)。
    • 谢谢,在这种情况下,界面似乎是个好主意。 @Vikas 数组初始化无效。
    【解决方案2】:

    当我们使用 AOT (ahead of time) 编译器时,所有的模板成员,如属性和方法都必须公开定义。如果要使用提前编译,则无法访问模板中的私有属性。

    【讨论】:

      猜你喜欢
      • 2018-01-13
      • 2023-03-17
      • 2010-12-14
      • 2019-09-06
      • 2018-10-29
      • 2020-09-28
      • 1970-01-01
      • 2012-05-11
      • 1970-01-01
      相关资源
      最近更新 更多