Javascript 当我输入一个文本框时，我有几个文本框

我正在创建一个动态表单，允许用户指定问题的内容以及存储在Google Firestore集合中的问题数量。当我填充一个文本框时，其他文本框将被完全相同的内容填充

html文件：这将创建表单并使用angular forms模块。 添加项

预计文本框将单独填充，我可以记录它们的数据

---

实际情况是所有文本框同时被填充。

以下方法可以从文本框中获取单独的值

 <ul *ngFor="let question of questions">
<li><strong>{{question.name}}</strong>
  <input type="text" placeholder="Add Title" [(ngModel)] = 'question.answer' name = "title">
</li>

{{question.name}}

---

{{question.name}}
这可能是因为，您将相同的
ngModel
绑定到所有输入框，这有什么区别？我想将答案与所有其他答案一起存储在一个独立于问题集合的集合中。抱歉，我对angular和firestore有点陌生。不同之处在于，您将同一对象与所有文本框相关联。代码似乎很完美。请考虑添加一些描述代码试图完成的注释。
@Component({
  selector: 'app-add-item',
  templateUrl: './add-item.component.html',
  styleUrls: ['./add-item.component.scss']
})
export class AddItemComponent implements OnInit {
  questions: Question[];
  items: Item[];
  answers: Answer[];
  answer: Answer = {
    name:'',
    number:0

  }
  item: Item = {
    title:'',
    description:'',

  }
  question: Question = {
    name:'',
    number:null,
    answer:'',
  }
  database;
  doc:'';


  constructor(private dataService: DataService, private route: ActivatedRoute) { 
    this.route.params.subscribe(params => this.doc = params["id"])

  }

  ngOnInit() {
    this.dataService.getQuestions(this.doc).subscribe(questions => {
      this.questions = questions;
    })
  }
  onSubmit(){
{
  if(this.answer.name != ''){
    console.log(this.answer.name)
    this.dataService.addAnswer(this.answer);
    this.answer.name = "";


    }


  }

}}

 <ul *ngFor="let question of questions">
<li><strong>{{question.name}}</strong>
  <input type="text" placeholder="Add Title" [(ngModel)] = 'question.answer' name = "title">
</li>