Angular 中 ngOnInit() 上的动态创建类字段

Posted 2023-03-13

【中文标题】Angular 中 ngOnInit() 上的动态创建类字段

【英文标题】：Dynamic creation class field on ngOnInit() in Angular

【发布时间】：2018-08-24 07:33:19

【问题描述】：

我尝试在类中动态创建变量来存储值并在 ngModel 和其他地方使用它。 我知道，我可以像这样为 ngOnInit() 中的变量赋值

export class Component implements OnInit
   name: string;
   ngOnInit()
       this.name = 'John Doe';
   

但我有一些问题 - 我从服务器 API 获取我的字段，但不知道我得到了什么和多少项目。我只能解析服务器响应并在获取后为新变量赋值。

我不能这样做（TS2540：无法分配给“名称”，因为它是常量或只读属性。）

export class Component implements OnInit
   ngOnInit()
       name = 'John Doe';
   

如何在 ngOnInit() 或其他地方为我的班级分配新字段？ （我想我可以在构造函数中做到这一点，但文档说我不应该将它与对 API 的 Observable 调用和其他困难的事情一起使用）

【参考方案1】：

您可以使用类似的方法来实现：

ngOnInit() 
  this['prop'] = 'value';

这是一个工作示例的链接：https://stackblitz.com/edit/dynamic-class-props

【讨论】：

感谢您的回答和实时代码，我忘了尝试 [] 分配！ :)

很高兴我能帮上忙 :)

【参考方案2】：

您可以向类添加索引器，以便能够使用任何属性名称而不会出现编译器错误：

export class Component 
    [name: string]: any;
    ngOnInit()
        this["name"] = 'John Doe';
        this.nameaa = "dd"
    

您应该小心，这意味着您可能会拼错属性名称，编译器不会发出任何错误。

【讨论】：

感谢您对拼写错误的属性名称的回答和关注