Question

我有一个用于获取数据的API。我需要一个Angular component，它将在表单'@'的任意位置键入input/text field后显示这些数据。

需要您的好建议。

Answer 1

例如，您可以使用keyup事件获取密钥代码。

template: `
  <input (keyup)="onKey($event)">
`

  onKey(event: any) {
    if (event.target.value === '@') {
       // do some action, change visibility, and so on...
    }
  }

您可以在Angular文档中找到所有详细信息：https://angular.io/guide/user-input

Answer 2

<input type="text" [ngModel]="mymodel (ngModelChange)="valuechange($event.target.value)" />

收听所有输入的模型更改事件。

app.component.ts

export class AppComponent {
  name = 'Angular';
  mymodel: any;
  captureMode: boolean;
  stringCapture: string;
  constructor() {
    this.stringCapture = "";
    this.captureMode = false;
  }
  valuechange(event: any) {
    if (this.captureMode == true) {
      if (this.captureMode == true && event.keyCode >= 65 && event.keyCode <= 90) {
        this.stringCapture += event.key;
        // make your api call with stringCapture
      }
      this.captureMode = true;
    }

    if (event.keyCode == 50) {
      this.captureMode = true;
      this.stringCapture = ""
    }
    if (event.keyCode == 32) {
      this.captureMode = false;
      this.stringCapture = "";
    }
  }
}

所以我删除了spacebar

上的捕获内容

Answer 3

据我了解，您需要角度提及组件。您可以按以下方式尝试_

https://github.com/dmacfarlane/angular-mentions

祝你好运。

角组件，用于在键入“ @”后显示所有数据

3 个答案: