如何以角度将数组绑定到ngModel并检测更改答案

【问题标题】：How to bind an array to ngModel in angular and detect the changes如何以角度将数组绑定到ngModel并检测更改
【发布时间】：2020-06-10 14:24:39
【问题描述】：

我有一个字符串数组

array = ["one","two","three","four"]

, 我想将此值绑定到这样的一些输入：

<input class="form-control"
                       type="text"
                       [(ngModel)]="array">

然后当用户更改输入中的某些内容时，例如添加“五”，我想将其添加到数组中，与删除相同。我已经像之前展示的那样完成了它，起初输入有数组 [4]，但是当我开始在输入中输入一些内容时，Angular 将其更改为字符串一、二、三、四、五如何进行此绑定以仅更新原始数组而不将其转换为字符串？

【问题讨论】：

你不能，至少不能用input type="text"。您可以尝试创建自己的控件，但您需要找到一种方法来显示与数组交互的方式。通常，您希望将选项限制在列表中，并允许用户从列表中选择多个项目，然后将这些项目绑定到数组。这是很常见的。没有您提供的更多信息，尽管尚不清楚您到底在寻找什么。
基本上，我正在寻找一种方法来进行输入，用户可以在其中编写任何他想要的内容，并且他将编写的文本将添加到字符串数组中。
您必须做一些工作才能使这成为可能。您可以使用(change)="inputChanged($event);，然后在那里进行工作。

标签： angular

【解决方案1】：

1) 不能将数组与文本输入字段绑定

2) 当文本字段中的值发生变化时触发事件

<input class="form-control" type="text"  (change)="add($event.target.value)">

3) 在函数上只需将该值添加到数组中

add(value){
    this.array.push(value)
    console.log(this.array)
  }

.ts 文件

export class AppComponent  {
  array = ["one","two","three","four"]

  add(value){
    this.array.push(value)
    console.log(this.array)
  }
}

.html

<input class="form-control" type="text"  (change)="add($event.target.value)">

【讨论】：