Angular动态设置ngModel：投票应用输入框双向绑定同步异常

嘿，我来帮你搞定这个投票应用的双向绑定问题！你遇到的两个输入框同步显示内容的情况，大概率是模板绑定或者TS变量配置出了小疏漏，咱们一步步来修复：

1. 确保TS文件中两个变量独立声明 #

首先在你的组件类里，一定要分别声明option1和option2两个完全独立的变量，不要让它们指向同一个值或者引用（如果是字符串这类基本类型，直接初始化为空字符串或不同默认值就行）：

// 以Angular为例，Vue/React逻辑类似
import { Component } from '@angular/core';

@Component({
  selector: 'app-poll-creator',
  templateUrl: './poll-creator.component.html'
})
export class PollCreatorComponent {
  // 独立声明两个响应式变量
  option1: string = '';
  option2: string = '';

  onCreatePoll() {
    // 点击按钮后输出两个独立选项
    console.log({
      option1: this.option1,
      option2: this.option2
    });
  }
}

如果是Vue项目，用ref创建独立的响应式变量即可：

<script setup>
import { ref } from 'vue';

// 两个完全独立的响应式变量
const option1 = ref('');
const option2 = ref('');

const onCreatePoll = () => {
  console.log({
    option1: option1.value,
    option2: option2.value
  });
};
</script>

2. 模板中为每个输入框绑定对应变量 #

接下来在HTML模板里，给每个输入框分别绑定对应的变量，使用对应框架的双向绑定语法：

Angular模板示例： #

<div class="poll-input-container">
  <label>Option 1:</label>
  <input type="text" [(ngModel)]="option1" placeholder="输入选项1">

  <label>Option 2:</label>
  <input type="text" [(ngModel)]="option2" placeholder="输入选项2">
</div>

<button (click)="onCreatePoll()">Create Poll</button>

Vue模板示例： #

<template>
  <div class="poll-input-container">
    <label>Option 1:</label>
    <input type="text" v-model="option1" placeholder="输入选项1">

    <label>Option 2:</label>
    <input type="text" v-model="option2" placeholder="输入选项2">
  </div>

  <button @click="onCreatePoll">Create Poll</button>
</template>

常见错误排查 #

• 绑定了同一个变量：检查模板里是不是两个输入框都绑定了option1或option2，这是最容易犯的错误！
• 变量引用共享：如果你的选项是对象的属性（比如poll.option），要确保绑定的是poll.option1和poll.option2，而不是同一个属性。
• 响应式初始化错误：比如Vue里不小心把两个变量指向同一个ref对象，或者Angular里让两个变量引用了同一个对象（基本类型不会有这个问题）。

按照上面的配置，两个输入框就会各自绑定独立的变量，输入内容不会互相干扰，点击「Create Poll」后控制台也会输出包含两个独立选项的完整对象啦。

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