Question

我尝试使用以下方法实现自动完成文本框（我自己的组件） valuechanged事件，以后再使用(input)事件。

我仅在输入超过4个字符时才触发过滤器调用当输入第5个字符时，出现html列表并显示数据。

我面临的挑战是当用户选择选项。为此，我没有选择[hidden]或[ngIf]而是清除 filteredUsers可观察数组为空白。因此，当我这样做时，带有用户名的列表确实消失了，但是如果我输入任何其他用户ID或退格键，或输入第6个字符，getUser（过滤器方法）甚至没有触发。

然后，我将值更改事件替换为(input)，它们的工作原理都非常吸引人。我的问题是，尽管将filteredUsers事件设置为正常，但将of([])设置为blank = (input)却没有触发更改值。我正在研究angular6

users = new FormControl();

filteredUsers: Observable<any[]>;
ngOnInit() {
  this.filteredUsers = this.users.valueChanges
    .pipe(
      startWith<string>(''),
      switchMap(value => this.getUser(value))
    );
}

getUser(input: string): Observable<any[]> {
  if (input === 'undefined' || input.length <= 4) {
    return of([]);
  }
  return this.http
    .get<any[]>(this.baseURL + 'SomeController/getUser?userId=' + input)
    .pipe(
      map((user: any[]) => {
        return console.log('user is:', user), user.filter(u =>
          String(u.UserId).toLowerCase() === input.toLowerCase());
      })
    );
}
onUserSelected(a) {
  this.selected = a.FirstName;
  console.log(a);
  this.filteredUsers = of ([]);
}

<div class="searching">
  <input type="text" class="form-control" [formControl]="users">
  <div>
    <ul class="suggestionList">
      <li #elem *ngFor="let result of filteredUsers | async" (click)="onUserSelected(result)">{{result.UserId}} - {{result.FirstName}}
      </li>
    </ul>
  </div>
</div>

上面的问题是onUserselected，之后filteredUsers设置为of([])，然后在输入其他字符时未触发值更改事件。然后，我在valuechanged方法中注释了ngIniT，并更改为：

<input type="text" class="form-control" (input)="getUser(users.value);" [formControl]="users">

getUser(input: string) {
  if (input === 'undefined' || input.length <= 4) {
    this.filteredUsers = of([]);
  }

  this.filteredUsers = this.http
    .get<any[]>(this.baseURL + 'SomeController/getUser?userId=' + input)
    .pipe(
      map((user: any[]) => {
        return console.log('user is:', user), user.filter(u =>
          String(u.UserId).toLowerCase() === input.toLowerCase());
      })

    );
}

很漂亮。请向我解释为什么valuechanged没有触发，甚至当我查找任何文本框事件时，为什么在所有搜索中都键入键或更改值？为什么(input)事件未突出显示或不受欢迎？

角度文本框（输入）和valuechange事件行为差异

0 个答案: