在没有ReactiveForm的情况下使用Angular Material mat-autocomplete

Question

我尝试使用<mat-autocomplete>Angular Material(不是AngularJS)而不使用反应形式.但他们所有的例子都使用反应形式......

我尝试做的事情:
1.当输入内容时mat-input,进行Ajax调用以检索用户列表
2.显示自动完成中的用户列表(显示用户名),但将用户存储为模型
3当模型改变时,调用我选择的函数

现在我做那些疯狂的事情(我说疯了似乎很多).

<mat-form-field fxLayout>
  <input type="text"
             matInput fxFlex="100"
             [(ngModel)]="listFilterValue"
             (keyup)="memberInputChanged(input.value)"
             (change)="memberChanged()"
             *ngIf="isAutocompleteNeeded()"
             #input
             [matAutocomplete]="auto">
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete" [displayWith]="getMemberAsStr">
       <mat-option *ngFor="let member of members | async" [value]="member">
          {{ getMemberAsStr(member) }}
       </mat-option>
</mat-autocomplete>

现在,只有console.log在我的JS中才能看到所谓的内容,具有什么价值,所以我不在这里分享它.我使用正确的属性,正确的逻辑吗？

(members我的组件中的属性是Rxjs BehaviourSubject)

我现在所做的事情不起作用,因为listFilterValue它从未被设定为任何东西.

谢谢你的帮助

Answer 1

你应该避免在模板中调用方法,这可能会使你的浏览器在每次更改检测时被调用时崩溃,请参阅:*ng在angular2中运行无限循环技术上它不是一个无限循环,但你明白了:)

至于没有自动完成的表单控件没有太大的不同,你只需将表单控件交换为变量,如果需要,可以使用模板驱动的表单,或者根本不使用表单.这里是模板驱动的形式:

这里使用的演示JSON如下所示:

"value": [
  {
    "id": 409,
    "joke": "some joke here",
    "categories": []
  }
]

<form #f="ngForm">
  <mat-form-field>
    <input matInput [matAutocomplete]="auto" 
           name="joke" #jokeField="ngModel" 
           [(ngModel)]="currentJoke" (ngModelChange)="doFilter()">
  </mat-form-field>

  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let joke of jokes | async" [value]="joke.joke">
        {{joke.joke}}
    </mat-option>
  </mat-autocomplete>
</form>

你的TS可能看起来像:

doFilter() {
  this.jokes = this.service.getData()
    .pipe(
      map(jokes => this.filter(jokes.value)),
  )
}

filter(values) {
  return values.filter(joke => 
    // used 'includes' here for demo, you'd want to probably use 'indexOf'
    joke.joke.toLowerCase().includes(this.currentJoke))
}

StackBlitz演示