我尝试使用< 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>
现在,我的JS中只有console.log来查看所调用的内容,具有什么价值,所以我不在这里分享它.我使用正确的属性,正确的逻辑吗？
(我的组件中的成员属性是Rxjs BehavIoUrSubject)
我现在所做的不起作用,因为listFilterValue永远不会被设置为任何东西.
谢谢你的帮助
解决方法
你应该避免在模板中调用方法,这可能会使你的浏览器在每次更改检测时被调用时崩溃,请参阅：
*ngFor running an infinite loop in 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))
}
