Javascript 角度-在输入字段上写入@后显示下拉列表

我的目标是，当我开始在输入字段中写入@时，显示一个下拉菜单

我的组件

  myControl: FormControl = new FormControl();

  options = [
    'One',
    'Two',
    'Three'
  ];

  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith('@'),
        map(val => val.length >= 1 ? this.filter(val): [])
      );
  }

  filter(val: string): string[] {
    return this.options.filter(option =>
      option.toLowerCase().indexOf(val.toLowerCase()) === 0);
    console.log(this.options)
  }

这是我所做的，但它不起作用

HTML

---

只需在您的输入上注册更改事件-例如：

(change)='handlerMethode($event)'

---

检查输入中的@索引，如果找到，则执行所需操作。

只需在输入中注册更改事件-例如：

(change)='handlerMethode($event)'

---

检查输入的@索引，如果您找到，请执行您想要的操作。

您的订阅运行良好

因为选项列表中没有@，所以您只是忘记了转义过滤函数中的@

试试这个：

filter(val: string): string[] {
  return this.options.filter(option =>
    option.toLowerCase().indexOf(val.toLowerCase().replace('@', '')) === 0);
}

---

你的订阅效果很好

因为选项列表中没有@，所以您只是忘记了转义过滤函数中的@

试试这个：

filter(val: string): string[] {
  return this.options.filter(option =>
    option.toLowerCase().indexOf(val.toLowerCase().replace('@', '')) === 0);
}

---

你并没有把模板中的输入和代码中的输入连接起来。。。在角文档中查找ViewChild装饰器。。。然后您通过其标记选择输入，并且应该能够访问它。。。或者您使用change事件注册一个处理程序方法，如下面所述。。。当我在家时，我会添加一个例子谢谢@Florian，我很感激你没有真正将模板中的输入与代码中的输入连接起来。。。在角文档中查找ViewChild装饰器。。。然后您通过其标记选择输入，并且应该能够访问它。。。或者您使用change事件注册一个处理程序方法，如下面所述。。。当我在家时，我会加上一个例子谢谢@Florian，我很感激