عند بناء قائمة منسدلة في Angular 2، يمكنك استخدام الحقل [value] لتعيين قيمة لكل عنصر من العناصر المتوفرة في القائمة. ولكن يجب أن تتأكد من أن القيم التي تقوم بتعيينها تكون فريدة ومميزة بحيث يمكن استخدامها لاحقًا في الشفرة. في هذه الحالة، تريد استخدام خاصية id لكل عنصر. لكن لاحظ أن [value] سيعيد الكائن بأكمله، وليس الخاصية المحددة منه، لذا يجب عليك استخدام [(ngModel)] لربط القيمة المحددة بمتغير في الكود.
لتحقيق ذلك، يمكنك تعديل القالب الخاص بك كما يلي:
html<select [(ngModel)]="selectedValue" (change)="getPhotosByType(selectedValue.id)">
<option *ngFor="let v of values" [ngValue]="v">{{v.name}}option>
select>
في هذا الكود:
- استخدمنا
[(ngModel)]لربط القيمة المحددة بمتغير يُسمىselectedValue. - أضفنا
(change)event للاستماع إلى تغييرات القيمة المحددة. - داخل الحدث
(change)، نستدعي الدالةgetPhotosByType(selectedValue.id)ونمرر لهاidالمحددة.
تأكد من أنه قد تم تضمين المتغير selectedValue في مكونك مثل هذا:
typescriptselectedValue: any;
ثم يمكنك تعريف دالتك getPhotosByType(id) في المكون الخاص بك لتنفيذ الوظيفة المطلوبة باستخدام الـ id المحددة.
المزيد من المعلومات
بالطبع، ها هو المقال بأكمله:
عند بناء قائمة منسدلة في Angular 2، يمكنك استخدام الحقل [value] لتعيين قيمة لكل عنصر من العناصر المتوفرة في القائمة. ولكن يجب أن تتأكد من أن القيم التي تقوم بتعيينها تكون فريدة ومميزة بحيث يمكن استخدامها لاحقًا في الشفرة. في هذه الحالة، تريد استخدام خاصية id لكل عنصر. لكن لاحظ أن [value] سيعيد الكائن بأكمله، وليس الخاصية المحددة منه، لذا يجب عليك استخدام [(ngModel)] لربط القيمة المحددة بمتغير في الكود.
لتحقيق ذلك، يمكنك تعديل القالب الخاص بك كما يلي:
html<select [(ngModel)]="selectedValue" (change)="getPhotosByType(selectedValue.id)">
<option *ngFor="let v of values" [ngValue]="v">{{v.name}}option>
select>
في هذا الكود:
- استخدمنا
[(ngModel)]لربط القيمة المحددة بمتغير يُسمىselectedValue. - أضفنا
(change)event للاستماع إلى تغييرات القيمة المحددة. - داخل الحدث
(change)، نستدعي الدالةgetPhotosByType(selectedValue.id)ونمرر لهاidالمحددة.
تأكد من أنه قد تم تضمين المتغير selectedValue في مكونك مثل هذا:
typescriptselectedValue: any;
ثم يمكنك تعريف دالتك getPhotosByType(id) في المكون الخاص بك لتنفيذ الوظيفة المطلوبة باستخدام الـ id المحددة.
مثال كامل لمكون Angular يمكن أن يبدو مثل هذا:
typescriptimport { Component } from '@angular/core';
@Component({
selector: 'app-dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
values = [
{ id: 3432, name: "Recent" },
{ id: 3442, name: "Most Popular" },
{ id: 3352, name: "Rating" }
];
selectedValue: any;
constructor() { }
getPhotosByType(id: number) {
// Perform API call or any other action using the selected id
console.log("Selected ID:", id);
}
}
هذا المكون يحتوي على القيم المستخدمة في القائمة المنسدلة، بالإضافة إلى المتغير selectedValue والذي يتم استخدامه للربط مع القيمة المحددة من القائمة. دالة getPhotosByType(id) تُستدعى عند تغيير القيمة المحددة وتمرر لها القيمة المحددة id لتنفيذ الإجراءات المطلوبة.
باستخدام هذه الطريقة، يمكنك الآن الوصول إلى القيمة المحددة في القائمة المنسدلة واستخدامها في الدوال أو العمليات الأخرى كما تشاء.
