angular - 检查一个值是私有(private)的还是只读的

标签 angular typescript

假设我有一个类:

export class ItemType{

  readonly itemtype_id: number;
  public name :string;

  constructor(itemtype_id: number, name: string) {
    this.itemtype_id = itemtype_id;
    this.name = name;
  }
}

现在我制作了一个单独的组件,它是一个可编辑的标签。

<div class="row">
  <div class="col-xs-4">
    <h4><span class="xvrfont padding">{{label}}</span></h4>
  </div>
  <div class="col-xs-2"></div>
  <div class="col-xs-5">

    <div *ngIf="editing">
      <input #editableField
             [required]="required"
             (blur)="onBlur($event)"
             [name]="value"
             [(ngModel)]="value"
             [type]="type"
             [placeholder]="label"
             (keyup.enter)="onEnter()"
             (mouseover)="$event.target.select()"
             />
    </div>
    <div *ngIf="!editing">
      <h4 title="Click to edit" (click)="edit(value);" (focus)="edit(value);" tabindex="0" class="inline-edit">{{value}}&nbsp;</h4>
    </div>


  </div>
</div>

当我调用此组件时,我希望根据属性是否为只读来编辑该字段。如果该属性是只读的,则该字段不应是可编辑的。如果不是,它应该。

<app-editable-field [isEditable]={{**check if the property is readonly**}} label='Label" [required]="true" type="text"></app-editable-field>

有没有一种简单的方法来检查类中的属性是只读的还是私有(private)的?

最佳答案

问题是您的 Typescript 会被编译成 Javascript,请始终牢记这一点。

因此所有类型和公共(public)/私有(private)检查(以及所有其他使 Typescript 很棒的东西)只能在编译时执行。一旦将其编译为 Javascript,所有这些信息都会丢失。这意味着实际上没有办法在运行时检查成员是私有(private)的还是只读的,因为您的浏览器正在执行纯 Javascript。

为了说明这一点,请检查此链接以查看您的 Typescript 类被编译成什么:TypeScript Playground

正如 dsfq 在评论中指出的那样,使用一个 bool 值成员来指示该字段是否可编辑。

关于angular - 检查一个值是私有(private)的还是只读的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48168028/

相关文章:

javascript - Angular 2 : progress/loading overlay directive

扩展面板标题内的 Angular Material 复选框 : how to allow the checkbox to be activated with the keyboard?

typescript - eslint 规则强制 Typescript 可选参数函数语法

Angular 2 自定义区域设置

javascript - 在对象树中查找根和任意对象之间的对象

typescript - 注入(inject)组件Angularjs2

javascript - 导入 Typescript 时找不到 Webpack 模块

javascript - 当另一个数据更新时,Angular 2更新数据

javascript - 如何在以编程方式创建的 iframe 的 onLoad 上调用 this.somefunction() ?

angular - 有没有办法在 Typescript 和 Angular 中为 "let variable"类型提示 IDE?