我想以我使用的形式实现 ngx-mat-select-search,但不幸的是,它不起作用(我无法打开下拉菜单 - 它没有向我显示任何值)。
我的html:
<div class="form">
<mat-form-field>
<mat-select placeholder="Kunde" name="customer" #customer="ngModel" [(ngModel)]="currentCustomer"
(ngModelChange)="dofilterCustomer()">
<ngx-mat-select-search></ngx-mat-select-search>
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
我的 .ts 文件:
import { Component, Inject, OnInit, ViewChild } from "@angular/core";
import {
MAT_DIALOG_DATA,
MatDialogRef,
MatDialogModule,
MatSelect
} from "@angular/material";
import { TableService } from "../table.service";
import { FormControl, Validators } from "@angular/forms";
import { EntryDTO, Customer } from "../../models";
import { SecurityService } from "src/app/security/security.service";
import { MatAutocompleteModule } from "@angular/material/autocomplete";
import { Observable } from "rxjs";
import { map, startWith } from "rxjs/operators";
@Component({
selector: "app-add-dialog",
templateUrl: "./add-dialog.component.html",
styleUrls: ["./add-dialog.component.css"]
})
export class AddDialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef<AddDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: EntryDTO,
public dataService: TableService
) {}
customers!: Observable<string[]>;
currentCustomer = "";
forwarders!: Observable<string[]>;
currentForwarder = "";
bins!: Observable<string[]>;
currentBin = "";
@ViewChild("singleSelect") singleSelect!: MatSelect;
ngOnInit() {}
dofilterCustomer() {
this.customers = this.dataService
.getAllCustomers()
.pipe(map(customers => this.filter(customers, this.currentCustomer)));
}
dofilterForwarder() {
this.forwarders = this.dataService
.getAllForwarders()
.pipe(map(forwarders => this.filter(forwarders, this.currentForwarder)));
}
dofilterBins() {
this.bins = this.dataService
.getAllBins()
.pipe(map(bins => this.filter(bins, this.currentBin)));
}
formControl = new FormControl("", [
Validators.required
// Validators.email,
]);
getErrorMessage() {
return this.formControl.hasError("required")
? "Required field"
: this.formControl.hasError("email")
? "Not a valid email"
: "";
}
submit() {
this.dataService.addEntry(this.data);
}
onNoClick(): void {
this.dialogRef.close();
}
public confirmAdd(): void {
this.dataService.addEntry(this.data);
}
filter(values: string[], current: string) {
return values.filter(value => value.toLowerCase().includes(current));
}
}
最初我的 html 中有以下代码。然后它起作用了,但我没有下拉菜单,只有一个“自动完成列表”:
<div class="form">
<mat-form-field class="example-full-width accent">
<input type="text" #input placeholder="Kunde" aria-label="Number" name="customer" #customer="ngModel" matInput
[(ngModel)]="currentCustomer" (ngModelChange)="dofilterCustomer()" [matAutocomplete]="auto1" required>
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
<mat-autocomplete #auto1="matAutocomplete">
<mat-option *ngFor="let customer of customers | async" [value]="customer">
{{customer}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
也许有人能看出我做错了什么?
提前谢谢您。
最佳答案
您需要初始化this.customers
。我建议首先将可观察对象设置为重播主题并首先加载客户,如下所示:
customers: ReplaySubject<string[]> = new ReplaySubject<string[]>(1);
ngOnInit() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(customers));
}
和
dofilterCustomer() {
this.dataService
.getAllCustomers()
.subscribe(customers => this.customers.next(this.filter(customers, this.currentCustomer)));
}
另请参阅示例实现 https://stackblitz.com/github/bithost-gmbh/ngx-mat-select-search-example和 https://github.com/bithost-gmbh/ngx-mat-select-search/issues/83
关于angular - ngx-mat-select-search 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53375443/