تحويل تواريخ JSON إلى كائنات تاريخ في Angular 2

فيما يخص استفسارك حول كيفية استخدام التاريخ في بناء الصنف (Class Constructor) في Angular 2، يجب أولاً فهم كيفية تحويل سلسلة تاريخ JSON إلى كائن تاريخ في TypeScript.

في المثال الذي قدمته، تقوم بتحميل بيانات JSON تحتوي على سلسلة تاريخ، وتحاول استخدامها في بناء صنف Compaing في Angular 2. ومع ذلك، تواجه مشكلة حيث يتم تفسير التاريخ على أنه سلسلة نصية بدلاً من كائن تاريخ.

لحل هذه المشكلة، يمكنك استخدام الدالة new Date() لتحويل سلسلة التاريخ إلى كائن تاريخ. يمكنك تحقيق ذلك عن طريق تعديل بناء الصنف Compaing ليأخذ السلسلة ويحولها إلى كائن تاريخ.

قم بتعديل بناء الصنف كما يلي:

typescriptCopy code
export class Compaing {
    constructor(public id: number, public name: string,
                public dateoff: Date, public available: boolean) {
        // تحويل سلسلة التاريخ إلى كائن تاريخ
        this.dateoff = new Date(dateoff);
    }
}

بتحديث البناء بإضافة this.dateoff = new Date(dateoff)، ستتمكن الآن من استخدام Compaing بطريقة صحيحة، حيث يتم تحويل التاريخ من سلسلة نصية إلى كائن تاريخ عند إنشاء الكائن.

عند القيام بذلك، يمكنك الآن استخدام res.json() دون مشاكل، حيث سيتم تحويل سلسلة التاريخ إلى كائن تاريخ بشكل تلقائي في بناء الصنف.

بالطبع، دعنا نوسع على الموضوع ونقدم المزيد من التفاصيل حول كيفية التعامل مع تحويل تاريخ JSON إلى كائن تاريخ في TypeScript وAngular 2.

في Angular 2، يعتبر استخدام res.json() للتحويل من الاستجابة إلى JSON كثيرًا ما يكون مناسبًا، ولكن يُفضل الآن استخدام res.json() بدلاً من res.json() بسبب تغييرات في Angular.

يمكنك استخدام res.body بدلاً من res.json()، والتي توفر نفس النتيجة، وذلك كالتالي:

typescriptCopy code
httpClient.get<Compaing>(url).subscribe(res => {
    const compaing: Compaing = {
        id: res.body.id,
        name: res.body.name,
        dateoff: new Date(res.body.dateoff),
        available: res.body.available
    };
    // يمكنك الآن استخدام compaing بشكل صحيح مع التاريخ المحول
});

في هذا السياق، يتم استخدام res.body بدلاً من res.json()، ويتم تحويل التاريخ إلى كائن تاريخ باستخدام new Date(res.body.dateoff).

يعد هذا النهج أكثر دقة في Angular الحديث ويسمح بفحص أكثر تفصيلاً للجسم والتحكم الأفضل في كيفية تحويل البيانات. يمكنك أيضًا استخدام HttpClient من @angular/common/http لتحقيق ذلك.

بهذا، يمكنك ضمان أن تكون عملية تحويل التاريخ في Angular 2 تتم بشكل صحيح، مما يؤدي إلى تحسين دقة وكفاءة التطبيق الخاص بك.