基于选择数量创建指定ngModel的输入框，解决属性未定义报错

这个错误我之前帮人排查过好几次，核心原因就是绑定的ngModel变量没提前初始化，导致Angular在渲染的时候找不到对应的属性/数组元素。结合你的需求（根据选择数量生成1-5个输入框，对应answer1到answer5），给你两个可行的解决方案：

方案一：使用单独变量（完全匹配你的answer1-answer5需求） #

步骤1：在组件类中提前声明并初始化所有变量 #

不管用户选几个答案，先把所有可能用到的answer1到answer5都初始化好，避免Angular找不到变量：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始化所有answer变量为空白字符串
  answer1: string = '';
  answer2: string = '';
  answer3: string = '';
  answer4: string = '';
  answer5: string = '';
  // 默认选中1个答案
  selectedAnswerCount: number = 1;
}

步骤2：模板中动态渲染对应数量的输入框 #

用*ngFor循环生成1-5的序列，再根据选中数量过滤显示，同时通过this['answer' + (index+1)]动态绑定对应的变量：

<!-- 数量选择器 -->
<select [(ngModel)]="selectedAnswerCount">
  <option value="1">1个答案</option>
  <option value="2">2个答案</option>
  <option value="3">3个答案</option>
  <option value="4">4个答案</option>
  <option value="5">5个答案</option>
</select>

<!-- 动态渲染输入框 -->
<div *ngFor="let num of [1,2,3,4,5]; let idx = index" 
     *ngIf="idx < selectedAnswerCount">
  <input type="text" 
         [(ngModel)]="this['answer' + (idx+1)]" 
         placeholder="请输入答案{{idx+1}}">
</div>

方案二：使用数组（更简洁易维护） #

如果不想维护5个单独变量，用数组的方式更灵活，也能从根源避免undefined错误：

步骤1：组件类中初始化数组并处理数量变化 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始化数组，默认有1个空白元素
  answers: string[] = [''];
  selectedAnswerCount: number = 1;

  // 当选择的数量变化时，调整数组长度
  adjustAnswerArray() {
    // 补充空白元素到选中的数量
    while (this.answers.length < this.selectedAnswerCount) {
      this.answers.push('');
    }
    // 截断数组到选中的数量
    while (this.answers.length > this.selectedAnswerCount) {
      this.answers.pop();
    }
  }
}

步骤2：模板代码 #

<select [(ngModel)]="selectedAnswerCount" (change)="adjustAnswerArray()">
  <option value="1">1个答案</option>
  <option value="2">2个答案</option>
  <option value="3">3个答案</option>
  <option value="4">4个答案</option>
  <option value="5">5个答案</option>
</select>

<div *ngFor="let answer of answers; let idx = index">
  <input type="text" 
         [(ngModel)]="answers[idx]" 
         placeholder="请输入答案{{idx+1}}">
</div>

为什么之前会出错？ #

如果你的模板里直接绑定answer2但组件类里没声明这个变量，或者用数组但没提前初始化就访问answers[1]，Angular在渲染时找不到对应的属性/数组元素，就会抛出Cannot read property '1' of undefined错误。只要提前初始化好绑定的变量/数组，这个问题就能解决。

内容的提问来源于stack exchange，提问作者M. Kahnke