如何在Angular中自动化创建this.变量

你给出的写法不可行，因为'this.' + variable只是生成了一个字符串（比如"this.variable1"），给这个字符串赋值false完全不会影响this上的实际属性。

要实现通过变量名动态操作this的属性，JavaScript提供了方括号属性访问语法，这才是正确的方式：

基本用法 #

1. 动态创建/设置属性 #

直接通过this[变量名]的形式赋值，就能自动给this添加对应名称的属性：

let variable = 'variable1';
// 给this创建名为variable1的属性并赋值为false
this[variable] = false;

2. 动态访问属性 #

如果要读取这个属性的值，同样用方括号语法：

let variable = 'variable1';
let test = this[variable]; // test的值为false

Angular场景下的注意事项 #

在Angular组件中，直接给this动态添加新属性可能会导致变更检测失效——因为Angular在组件初始化阶段只会追踪已声明的实例属性，动态新增的属性不会自动触发视图更新。

解决这个问题的推荐方式是用一个容器对象来管理动态属性：

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-prop',
  template: `<p>动态属性值：{{ dynamicProps.variable1 }}</p>`
})
export class DynamicPropComponent {
  // 定义一个容器对象存放动态属性
  dynamicProps: Record<string, any> = {};

  constructor() {
    let propName = 'variable1';
    // 给容器对象添加动态属性
    this.dynamicProps[propName] = false;
  }
}

这种方式下，容器对象的属性变更会被Angular正常检测到，视图会自动更新。

如果确实需要直接给this添加动态属性并触发变更检测，可以手动调用ChangeDetectorRef的detectChanges()方法，或者使用NgZone包裹属性赋值操作，但这种方式不如容器对象来得简洁可靠。

内容的提问来源于stack exchange，提问作者Julien