angular - Mat-autocomplete 不填充结果
问题描述
这是html
<form>
<mat-form-field class="container">
<input type="text" matInput [formControl]="usersForm" [matAutocomplete]="auto" >
<!-- CREATE AUTO COMPLETE PANEL WITH OPTIONS. -->
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let result of filteredUsers" [value]="result.id">
{{ result.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
这是课
export class User {
constructor(public id: number, public name: string) {}
}
这是组件
export class CertificationComponent implements OnInit {
filteredUsers: User[] = [];
usersForm = new FormControl();
isLoading = false;
constructor(private fb: FormBuilder, private service: Service) {}
ngOnInit() {
this.usersForm.valueChanges.subscribe(
term => {
if (term != '') {
this.service.search(term).subscribe(
data => {
console.log(data);
this.filteredUsers = data as any[];
})
}
})
}
displayFn(user: User) {
if (user) { return user.name; }
}
}
这就是服务。我正在创建我传递任何输入的虚拟对象,但它似乎没有出现在下拉列表中。我在组件中获取用户虚拟数据,但在视图下拉列表中没有。
@Injectable()
export class CertificationService {
user : User = {id:1, "name":"abcd"};
users: User[] = [this.user];
constructor(private http: HttpClient) {}
search(name:String): Observable<any> {
return of(this.users);
}
}
解决方案
推荐阅读
- javascript - Razorpay 集成。问题:请提供您的 api 密钥以进行身份验证
- ios - UserDefaults UIButton 状态有时加载不正确
- xcode - Xcode 11 无法创建 Mac 应用分发证书
- ios - 在 ViewController 中设置 TableView 和 collectionView
- c# - XML 声明包含换行符而不是双引号 - 在 C# 中创建 xml 文档时
- python - Apache spark中两个简单rdd的协方差
- angular - 打字稿继承中的覆盖函数
- swift - 获取某些对象的关系计数(核心数据)
- google-apps-script - 使用谷歌应用脚本从谷歌文档中提取文本
- android - 如何从具有内核读/写功能的 ARM64 程序中获取 swapper_pg_dir 地址?