تحديد الخيارات في الـ mat-select بواسطة mat-option و mat-optgroup
الـ mat-option
getSupplierCompanies() {
this.supplierCompaniesService.getItems().subscribe(res => {
this.options = res;
setTimeout(() => {
if (this.data.supplier_company.id) {
let a = res.find((a: any) => { return a.id === this.data.supplier_company.id });
this.form.get('supplier_company')?.setValue(a);
}
}, 1000);
});
}
الـ mat-optgroup
getClassifications() {
this.ingredientsClassificationsService.getItems().subscribe(res => {
this.classifications = res;
setTimeout(() => {
if (this.data.classification.id) {
let a = res.find((a: any) => { return a.id === this.data.classification.id });
this.form.get('classification')?.setValue(a, { emitEvent: false });
}
}, 500);
});
}
// ... باقي متغيراتك ودوالك
/**
* دالة مخصصة لمقارنة الكائنات في mat-select
* @param c1 الكائن الأول (من formControl)
* @param c2 الكائن الثاني (من mat-option)
* @returns boolean
*/
compareClassifications(c1: any, c2: any): boolean {
// تحقق من وجود الكائنين قبل مقارنة الـ id لتجنب الأخطاء
return c1 && c2 ? c1.id === c2.id : c1 === c2;
}
<mat-select #classification formControlName="classification"
(selectionChange)="onSelectionChange($event)"
[compareWith]="compareClassifications" required>
<ngx-mat-select-search #searchClassificationText
[placeholderLabel]="'SEARCH_ENGINE.PLACEHOLDER' | translate"
[noEntriesFoundLabel]="' '+ ('LABELS.NOT_FOUND' | translate)"
[clearSearchLabel]="'BUTTONS.CLEAR' | translate"
[clearSearchInputInitiallyAfterClose]="true" [preventHomeEndKeyPropagation]="true"
[enableClearOnEscapePressed]="true"
[formControl]="searchControl"></ngx-mat-select-search>
<ng-container *ngFor="let group of classifications">
<mat-optgroup
*ngIf="(group.children | ingredientClassificationsPipe: searchClassificationText.value).length > 0"
[label]="lang === 'ar'? group.ar_name : group.en_name" class="bold-optgroup">
<mat-divider class="mt-1"></mat-divider>
<mat-option
*ngFor="let item of group.children | ingredientClassificationsPipe: searchClassificationText.value"
[value]="item">
<mat-icon matSuffix (click)="openEditDialog(item)"
[matTooltip]="'BUTTONS.EDIT_CLASSIFICATION' | translate"
class="ml-2 cursor-pointer icon-edit">edit</mat-icon>
<mat-icon matSuffix class="icon-edit mx-2">{{item.icon}}</mat-icon>
{{lang === 'ar'? item.ar_name : item.en_name}}
</mat-option>
</mat-optgroup>
</ng-container>
<mat-option
(click)="openAddClassificationDialog()"><mat-icon>add_circle_outline</mat-icon>
{{'BUTTONS.ADD_NEW_CLASSIFICATION' | translate}}</mat-option>
</mat-select>
تعليقات
إرسال تعليق