首页 > 解决方案 > 使用 ngfor 共享相同值的输入字段

问题描述

我在这里要做的是将每个输入字段的输入值动态添加到我的“标签”输出中。我遇到的问题是,当我输入和/或提交值时,所有输入字段和“标签”输出都会收到相同的值。我怎样才能解决这个问题?

感谢您花时间研究这个问题!

index.html
注意* - 我削减了大部分代码,只是想直接说明我需要帮助的地方。第一行代码是为了让你知道我在 *ngFor 循环中工作。

<div class="row" *ngFor="let student of students; let i = index">    
<ul *ngFor="let tag of tags">
  <li class="tag">{{ tag }}</li>
</ul>
<input
  type="text"
  name="tagInput"
  class="moreInfo tagInput"
  placeholder="Add a tag"
  [(ngModel)]="tagInput"
  (keydown.enter)="onAddTag($event)">
</div>

ts文件

import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

tagInput = '';
tags = [];

onAddTag(event){
  this.tags.push(this.tagInput);
  this.tagInput = '';
}

标签: javascripttypescriptangular6

解决方案


推荐阅读