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

时间:2018-03-15 13:08:55

标签: javascript angular typescript angular5 ngoninit

我尝试在类中动态创建变量来存储值,并在ngModel和其他placese中使用它。 我知道,我可以在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()或其他地方为我的班级分配新字段? (我想我可以在构造函数中完成它,但文档说我不应该使用Observable调用API和其他困难的东西)

2 个答案:

答案 0 :(得分:1)

你可以使用这样的东西来实现这个目标:

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

以下是工作示例的链接:https://stackblitz.com/edit/dynamic-class-props

答案 1 :(得分:1)

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

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

你应该注意,这意味着你可以拼错属性名称,编译器不会发出任何错误。