Angular 14：如何设置并访问动态模板引用变量以修改对象值

问题分析 #

你当前的代码存在两个核心问题：

1. 动态模板引用变量写法错误：#[{{v}}]不是Angular支持的动态模板引用语法，无法正确关联组件实例。
2. changeVal方法逻辑错误：veh == this.userElements的判断完全不符合需求，且未关联到对应的app-vehicle组件实例，导致无法修改目标数据。

修复步骤 #

1. 修正主组件类（main.component.ts） #

通过@ViewChildren获取所有app-vehicle组件实例，在changeVal方法中匹配目标组件并修改数据：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { VehicleComponent } from '../vehicle/vehicle.component';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css'],
})
export class MainComponent {
  vehicle = ['Cycle', 'Bus'];
  travals = {
    Cycle: { allData: [{ name: 'Cycle1', selected: false }, { name: 'Cycle2', selected: false }] },
    Bus: { allData: [{ name: 'Bus1', selected: false }, { name: 'Bus2', selected: false }] }
  };

  // 获取所有app-vehicle组件实例
  @ViewChildren(VehicleComponent) vehicleComponents!: QueryList<VehicleComponent>;

  changeVal(veh: string) {
    // 匹配对应名称的组件实例
    const targetComponent = this.vehicleComponents.find(comp => {
      return Object.keys(this.travals).find(key => this.travals[key] === comp.data) === veh;
    });

    if (targetComponent) {
      // 修改目标组件的allData中selected属性为true
      targetComponent.data.allData.forEach(item => {
        item.selected = true;
      });
    }
  }
}

2. 修正主组件模板（main.component.html） #

移除错误的动态模板引用写法，@ViewChildren会自动获取所有app-vehicle实例：

<div class="custom-select" style="width:400px;" *ngFor="let v of vehicle">
  <p>{{ v }}</p>
  <app-vehicle [data]="travals[v]"></app-vehicle>
</div> 
<button (click)="changeVal('Cycle')">Change Cycle object values</button> 
<button (click)="changeVal('Bus')">Change Bus object values</button>

3. 确保子组件输入属性正确配置（vehicle.component.ts） #

定义data输入属性，确保数据以引用类型传递，父组件修改时能同步到子组件：

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

@Component({
  selector: 'app-vehicle',
  templateUrl: './vehicle.component.html',
  styleUrls: ['./vehicle.component.css'],
})
export class VehicleComponent {
  @Input() data!: { allData: Array<{ name: string; selected: boolean }> };
}

关键说明 #

• @ViewChildren是Angular处理动态组件引用的标准方式，可批量获取指定类型的子组件实例。
• 由于allData是引用类型的数组，修改其元素的selected属性时，Angular的变更检测会自动触发视图更新，无需额外操作。

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