Вот код для списка флажков с функциями selectall, deselect All и поиска. Здесь все работает нормально, но проблема в том, что когда я впервые устанавливаю 2 флажка, я ищу имя, не совпадающее с выбранными флажками, на этот раз выбранные параметры были удалены, потому что имя элемента управления выбранной обуви было обновлено с помощью последний массив filterShoes. Здесь вы можете увидеть изменения в ngOnChnages.
return <typesOfShoes[]>[
{id:"1",name:'Boots'},
{id:"2",name:'Clogs'},
{id:"3",name:'Loafers'},
{id:"4",name:'Moccasins'},
{id:"5",name:'Sneakers'},
];
<form [formGroup]="frmStepOne" (ngSubmit)="onSubmit()">
<div>
<mat-form-field class="">
<input matInput placeholder="Search" value="" formControlName="searchbar">
</mat-form-field>
</div>
<div>
<mat-selection-list formControlName="selectedshoes">
<mat-list-option #allSelected checkboxPosition="before" [value]="0" (click)="toggleAllSelection()">selectAll</mat-list-option>
<mat-list-option checkboxPosition="before" [value]="item.id" *ngFor="let item of filteredShoes;" (click)="togglePerOne()">{{item.name}}</mat-list-option>
</mat-selection-list>
</div>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
ngOnInit() {
this.frmStepOne.controls.searchbar.valueChanges.subscribe(searchSrting => {
console.log(this.selectedCount.selectedOptions.selected)
this.filteredShoes = this.getSearchResult(searchSrting).slice();
});
};
ngOnChanges(changes:SimpleChanges){
console.log(changes);
}
toggleAllSelection() {
if (this.allSelected.selected) {
this.frmStepOne.controls.selectedshoes
.patchValue([...this.data.map(item => item.id), 0]);
} else {
this.frmStepOne.controls.selectedshoes.patchValue([]);
}
}
togglePerOne(){
if (this.allSelected.selected) {
this.allSelected.toggle();
return false;
}
if(this.frmStepOne.controls.selectedshoes.value.length==this.data.length)
this.allSelected.toggle();
}
onSubmit() {
if(this.frmStepOne.valid){
if(this.frmStepOne.controls.selectedshoes.value)
{
let k:any
k=this.frmStepOne.controls.selectedshoes.value.filter(x=>!isNumber(x)).join(',')
console.log(k);
}
console.log(this.frmStepOne.value);
}
}
getSearchResult(searchString: string): any {
return this.data.filter(x => x.name.toLowerCase().includes(searchString.toLowerCase()));
}
}