javascript - 使用带有 <input> 标签的 Angular 进行多选下拉菜单

标签 javascript html angular typescript multi-select

我正在构建 Angular 6 应用程序，其中我需要使用 <input> 进行多选下拉列表不使用<select>的文本框.

HTML:

<form>
  Select User: <input type="text" name="user" [value]="users"><br>
  <button type="submit"> Submit </button>
</form>

Ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    users = ['First User', 'Second User', 'Third User', 'Fourth User'];
}

我还需要使用纯 Javascript、Tpescript 以及不使用第三方或 jquery 来完成此操作。

还建议不要使用html datalist。

我进行了很多搜索，但找不到合适的解决方案。请帮助我实现结果。

Stackblitz:https://stackblitz.com/edit/angular-v7kmbq

最佳答案

这是工作代码，我使用 [(ngModel)] 代替表单控件:

https://stackblitz.com/edit/angular-qjrhs5?file=src%2Fapp%2Fapp.component.css

关于javascript - 使用带有 <input> 标签的 Angular 进行多选下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51963048/