如何基于event.target.name简化Angular的ngIf及相关赋值逻辑？

问题背景 #

现有多个带name属性的Checkbox，每个单独绑定独立变量（如financeValue、accountValue），ngOnInit中通过sessionStorage获取数据后，用多分支条件逐个赋值，存在大量重复代码，希望通过event.target.name简化逻辑。

优化方案 #

1. 重构组件变量：用对象替代零散变量

将多个独立的XXXValue变量合并为一个对象，键名对应Checkbox的name属性：

settings: { [key: string]: boolean } = {
  finance: false,
  account: false,
  techno: false,
  marketing: false,
  sales: false,
  logistic: false,
  call: false
};

2. 简化模板绑定

修改Checkbox的[checked]绑定，直接使用对象的键值对，保留原有样式和属性：

<input [checked]="settings.finance" (click)="saveSetting($event)" id="finance" aria-describedby="finance-description" name="finance" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="settings.account" (click)="saveSetting($event)" id="account" aria-describedby="account-description" name="account" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="settings.techno" (click)="saveSetting($event)" id="techno" aria-describedby="techno-description" name="techno" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="settings.marketing" (click)="saveSetting($event)" id="marketing" aria-describedby="marketing-description" name="marketing" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="settings.sales" (click)="saveSetting($event)" id="sales" aria-describedby="sales-description" name="sales" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="settings.logistic" (click)="saveSetting($event)" id="logistic" aria-describedby="logistic-description" name="logistic" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
<input [checked]="settings.call" (click)="saveSetting($event)" id="call" aria-describedby="call-description" name="call" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">

进阶优化：用*ngFor批量生成Checkbox
如果每个Checkbox结构相似，可定义配置数组，通过循环生成模板，彻底消除重复代码：

// 组件内定义配置数组
checkboxConfigs = [
  { name: 'finance', id: 'finance', descriptionId: 'finance-description' },
  { name: 'account', id: 'account', descriptionId: 'account-description' },
  { name: 'techno', id: 'techno', descriptionId: 'techno-description' },
  { name: 'marketing', id: 'marketing', descriptionId: 'marketing-description' },
  { name: 'sales', id: 'sales', descriptionId: 'sales-description' },
  { name: 'logistic', id: 'logistic', descriptionId: 'logistic-description' },
  { name: 'call', id: 'call', descriptionId: 'call-description' }
];

模板部分：

<input *ngFor="let config of checkboxConfigs"
       [checked]="settings[config.name]"
       (click)="saveSetting($event)"
       [id]="config.id"
       [aria-describedby]="config.descriptionId"
       [name]="config.name"
       type="checkbox"
       class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">

3. 简化ngOnInit赋值逻辑

利用对象键名直接匹配setName，无需多分支条件：

ngOnInit(): void {
  const getSession = sessionStorage.getItem('setting');
  if (getSession) {
    const parseSession = JSON.parse(getSession);
    parseSession.forEach(item => {
      if (this.settings.hasOwnProperty(item.setName)) {
        this.settings[item.setName] = item.setValue;
      }
    });
  }
}

4. 简化saveSetting方法

通过event.target.name直接更新对象属性，并同步到sessionStorage：

saveSetting(event: Event): void {
  const target = event.target as HTMLInputElement;
  const settingName = target.name;
  this.settings[settingName] = target.checked;
  // 同步到sessionStorage（兼容原有数据格式）
  const sessionData = Object.entries(this.settings).map(([setName, setValue]) => ({ setName, setValue }));
  sessionStorage.setItem('setting', JSON.stringify(sessionData));
}

核心优势 #

• 消除大量重复的变量声明与多分支条件，代码更简洁易维护
• 新增Checkbox只需在配置数组中添加项，无需修改模板和逻辑
• 通过event.target.name实现变量与DOM元素的动态绑定，逻辑更统一

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