mat-select-search 不加载初始列表
mat-select-search doesn't load initial list
我正在用这个 example 做 mat-select-search。
我正在使用带有动态数据的反应形式。我来自服务器的响应只是项目数组。
我有动态数据车辆,当我输入搜索时它有效但初始列表不显示。
如何让我的动态数据第一次显示?
.ts
vehicles = [];
public filteredOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
protected _onDestroy = new Subject<void>();
@Output() onSelectionChange: EventEmitter<any> = new EventEmitter<any>();
public modelFilterCtrl: FormControl = new FormControl();
@ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
ngOnInit(): void {
this.campaignService.getVehicles().subscribe((data: any[])=>{
this.vehicles = data;
})
this.modelFilterCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterEntities();
});
}
set data(data: any[]) {
this._data = data;
// load the initial list
this.filteredOptions.next(this.data.slice());
}
get data(): any[] {
return this._data;
}
private _data: any[];
ngAfterViewInit(): void {
this.setInitialValue();
}
onChange($event) {
this.onSelectionChange.emit($event);
}
private setInitialValue() {
this.filteredOptions
.pipe(take(1), takeUntil(this._onDestroy))
.subscribe(() => {
if(this.multiSelect)
this.multiSelect.compareWith = (a: any, b: any) => a === b;
});
}
.html
<mat-select multiple formControlName="Brand" (selectionChange)="onChange($event)" #multiSelect>
<mat-option>
<ngx-mat-select-search
[formControl]="modelFilterCtrl"
[placeholderLabel]="'Search...'">
</ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let item of filteredOptions | async" [value]="item">{{item}}</mat-option>
</mat-select>
当你得到初始车辆列表时,你应该初始化 filteredOptions
:
ngOnInit(): void {
this.campaignService.getVehicles().subscribe((data: any[])=>{
this.vehicles = data;
this.filteredOptions.next(this.vehicles);
})
我正在用这个 example 做 mat-select-search。 我正在使用带有动态数据的反应形式。我来自服务器的响应只是项目数组。 我有动态数据车辆,当我输入搜索时它有效但初始列表不显示。 如何让我的动态数据第一次显示?
.ts
vehicles = [];
public filteredOptions: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
protected _onDestroy = new Subject<void>();
@Output() onSelectionChange: EventEmitter<any> = new EventEmitter<any>();
public modelFilterCtrl: FormControl = new FormControl();
@ViewChild('multiSelect', { static: true }) multiSelect: MatSelect;
ngOnInit(): void {
this.campaignService.getVehicles().subscribe((data: any[])=>{
this.vehicles = data;
})
this.modelFilterCtrl.valueChanges
.pipe(takeUntil(this._onDestroy))
.subscribe(() => {
this.filterEntities();
});
}
set data(data: any[]) {
this._data = data;
// load the initial list
this.filteredOptions.next(this.data.slice());
}
get data(): any[] {
return this._data;
}
private _data: any[];
ngAfterViewInit(): void {
this.setInitialValue();
}
onChange($event) {
this.onSelectionChange.emit($event);
}
private setInitialValue() {
this.filteredOptions
.pipe(take(1), takeUntil(this._onDestroy))
.subscribe(() => {
if(this.multiSelect)
this.multiSelect.compareWith = (a: any, b: any) => a === b;
});
}
.html
<mat-select multiple formControlName="Brand" (selectionChange)="onChange($event)" #multiSelect>
<mat-option>
<ngx-mat-select-search
[formControl]="modelFilterCtrl"
[placeholderLabel]="'Search...'">
</ngx-mat-select-search>
</mat-option>
<mat-option *ngFor="let item of filteredOptions | async" [value]="item">{{item}}</mat-option>
</mat-select>
当你得到初始车辆列表时,你应该初始化 filteredOptions
:
ngOnInit(): void {
this.campaignService.getVehicles().subscribe((data: any[])=>{
this.vehicles = data;
this.filteredOptions.next(this.vehicles);
})