Question

我必须做一个输入，一旦点击，它会显示一个可用选项列表，用户可以选择多个选项。选择该选项后，它会添加到数组中，并在输入中显示为标记，就像在Stack Overflow上提问时选择标记的输入一样。显然，我喜欢像Stack Overflow一样删除标签。通过http请求检索多个选项到服务器。

P.S：绑定＆＃34;点击＆＃34;下面就是例如。我不知道它是否正确或我是否应该改变。

这是我认为包含输入的HTML和用户点击它时的列表：

<div class="form-group row">
  <label for="role" class="col-md-3 col-form-label">Roles</label>
  <div class="col-md-9">
    <input type="text" id="role" name="role" class="form-control">
    <div class="container-fluid">
      <div class="row" *ngFor="let role of roles">
        <div (click)="getRole()">{{role.name}}</div>
      </div>
    </div>
  </div>
</div>

这是我从http请求获得的JSON，我希望所选标签的数组具有相同的结构：

[  
  {  
    "id": 1,
    "name": "name1",
  }
  {  
    "id": 2,
    "name": "name2",
  }
]

我使用的是Angular 5.2.8和Bootstrap 4。

所以我的问题是：

连接功能应该做什么（功能＆＃34;点击＆＃34;）来执行我的要求？
我是否需要使用JQuery或任何其他库？

Answer 1

如果您对使用库感兴趣而不是从头开始创建它，那么下面提到的库可以提供帮助：

单击输入打开列表并根据选项选择创建数组

1 个答案: