为什么 mat-autocomplete 不显示搜索到的选项?
Why is the mat-autocomplete not displaying the searched options?
这是我正在使用的表格:
<form [formGroup]="searchForm" id="searchForm">
<mat-form-field>
<input
matInput
type="text"
name="awesome"
id="awesome"
[formControl] = "formCtrl"
[matAutocomplete] = "auto"
value="{{ awesomeText }}"
[matAutocomplete]="auto">
<mat-autocomplete #auto = "matAutocomplete">
<mat-option *ngFor = "let res of result | async" [value] = "res">
{{res}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
这是在里面 constructor()
:
this.formCtrl = new FormControl();
this.formCtrl.valueChanges.subscribe((newValue) => {
this.result = this.find(newValue);
console.log('yes');
});
yes
正在打印,所以我知道这是有效的,但 mat-autocomplete
没有显示任何内容。 result
变量也在更新,因为我可以看到它在控制台上打印。我无法理解为什么没有显示搜索到的值。
如有任何帮助,我将不胜感激!
编辑
这是find()
方法:
find(val: string): string[] {
const matchFound = [];
for (let i = 0; i < dataJson.length; i++) {
if (dataJson[i].text.toLowerCase().startsWith(val) || dataJson[i].text.startsWith(val)) {
matchFound.push(dataJson[i].text);
}
}
console.log('matches ' + matchFound);
return matchFound;
}
您应该将字符串数组的 Observable 分配给 this.result
。但是您分配的是普通字符串数组。 async
pipe 与 observable 一起工作,而不是与普通数组一起工作。在模板中,您需要进行以下更改
来自
<mat-option *ngFor="let res of result | async" [value]="res">{{res}}</mat-option>
到
<mat-option *ngFor="let res of result | async" [value]="res.text">{{res.text}}</mat-option>
Typescript 更改
ngOnInit() {
this.result = this.myControl.valueChanges.pipe(
startWith(""),
map(value => this.find(value))
);
}
find(val: string): {
id: number,
text: string
}[] {
const matchFound: {
id: number,
text: string
}[] = [];
for (let i = 0; i < this.dataJson.length; i++) {
if (
this.dataJson[i].text.toLowerCase().startsWith(val) ||
this.dataJson[i].text.startsWith(val)
) {
matchFound.push(this.dataJson[i]);
}
}
console.log("matches " + matchFound);
return matchFound;
}
这是我正在使用的表格:
<form [formGroup]="searchForm" id="searchForm">
<mat-form-field>
<input
matInput
type="text"
name="awesome"
id="awesome"
[formControl] = "formCtrl"
[matAutocomplete] = "auto"
value="{{ awesomeText }}"
[matAutocomplete]="auto">
<mat-autocomplete #auto = "matAutocomplete">
<mat-option *ngFor = "let res of result | async" [value] = "res">
{{res}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
这是在里面 constructor()
:
this.formCtrl = new FormControl();
this.formCtrl.valueChanges.subscribe((newValue) => {
this.result = this.find(newValue);
console.log('yes');
});
yes
正在打印,所以我知道这是有效的,但 mat-autocomplete
没有显示任何内容。 result
变量也在更新,因为我可以看到它在控制台上打印。我无法理解为什么没有显示搜索到的值。
如有任何帮助,我将不胜感激!
编辑
这是find()
方法:
find(val: string): string[] {
const matchFound = [];
for (let i = 0; i < dataJson.length; i++) {
if (dataJson[i].text.toLowerCase().startsWith(val) || dataJson[i].text.startsWith(val)) {
matchFound.push(dataJson[i].text);
}
}
console.log('matches ' + matchFound);
return matchFound;
}
您应该将字符串数组的 Observable 分配给 this.result
。但是您分配的是普通字符串数组。 async
pipe 与 observable 一起工作,而不是与普通数组一起工作。在模板中,您需要进行以下更改
来自
<mat-option *ngFor="let res of result | async" [value]="res">{{res}}</mat-option>
到
<mat-option *ngFor="let res of result | async" [value]="res.text">{{res.text}}</mat-option>
Typescript 更改
ngOnInit() {
this.result = this.myControl.valueChanges.pipe(
startWith(""),
map(value => this.find(value))
);
}
find(val: string): {
id: number,
text: string
}[] {
const matchFound: {
id: number,
text: string
}[] = [];
for (let i = 0; i < this.dataJson.length; i++) {
if (
this.dataJson[i].text.toLowerCase().startsWith(val) ||
this.dataJson[i].text.startsWith(val)
) {
matchFound.push(this.dataJson[i]);
}
}
console.log("matches " + matchFound);
return matchFound;
}