تفعيل التفاعل الدينامي لتحديث حالة Checkbox في Angular 2 باستخدام Material Design

في Angular 2، يمكنك تحقيق هذا السلوك باستخدام الديناميات المتاحة في الإطار. يبدو أنك قد استخدمت ngModel بشكل صحيح في واجهة المستخدم لكن يحتاج عليك أيضًا إلى التفاعل مع الحدث المناسب عندما يتغير حال التأشير. لتحقيق هذا، يمكنك استخدام (change) event بما يلي:

htmlCopy code
<div class="uk-width-xlarge-1-1 uk-width-medium-1-2">
    <div class="uk-input-group">
        <span class="uk-input-group-addon"><input type="checkbox" [(ngModel)]="proposition1.propStatus" (change)="onCheckboxChange($event)">span>
        <label>Proposition 1label>
        <input [(ngModel)]="proposition1.wordingP" type="text" class="md-input" required class="md-input"/>
    div>
div>

ومن ثم، في مكون TypeScript الخاص بك، يمكنك تعريف الدالة onCheckboxChange التي تتفاعل مع حالة الـcheckbox وتقوم بتحديث القيمة في قاعدة البيانات:

typescriptCopy code
onCheckboxChange(event: any) {
    // تحديث حالة الاقتراح في قاعدة البيانات هنا باستخدام propositionService
    this.propositionService.updatePropositionStatus(this.proposition1.id, event.target.checked)
        .subscribe(response => {
            console.log(response);
        });
}

قم بتعديل الدالة updatePropositionStatus في propositionService لتقوم بإرسال طلب إلى الخادم لتحديث حالة الاقتراح في قاعدة البيانات.

يُظهر الكود أعلاه كيفية التفاعل مع حالة الـcheckbox وتحديث القيمة في الوقت الفعلي عبر الخادم. بعد تنفيذ هذه التغييرات، يجب أن تكون قاعدة البيانات الخاصة بك قادرة على تحديث حالة الاقتراح بناءً على تحديد أو إلغاء تحديد الـcheckbox.

بالطبع، دعونا نقدم مزيدًا من التفاصيل لتوضيح كيف يمكن تحسين تجربتك في تطوير تطبيق Angular 2 الخاص بك.

في البداية، يجب عليك التأكد من أن خدمة propositionService تتضمن الطرق اللازمة للتفاعل مع الخادم وتحديث حالة الاقتراح في قاعدة البيانات. يمكن أن تبدو هذه الطرق مثل:

typescriptCopy code
// proposition.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class PropositionService {
  private apiUrl = 'https://example.com/api/propositions'; // قم بتعديله وفقًا لعنوان API الخاص بك

  constructor(private http: HttpClient) { }

  addProposition(proposition: PropositionModel): Observable<any> {
    return this.http.post(`${this.apiUrl}/add`, proposition);
  }

  updatePropositionStatus(id: string, status: boolean): Observable<any> {
    return this.http.put(`${this.apiUrl}/updateStatus/${id}`, { status });
  }
}

ثم، يجب عليك التأكد من أنك قد قمت بتضمين HttpClientModule في مكون AppModule:

typescriptCopy code
// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

بعد ذلك، قد تحتاج أيضًا إلى التأكد من أنك قد قمت بتحديث نموذج الاقتراح PropositionModel بحيث يتضمن خاصية id:

typescriptCopy code
// proposition.model.ts

export class PropositionModel {
  id: string;
  wordingP: string;
  propStatus: boolean;
}

وبهذا، يجب أن يكون لديك تطبيق Angular 2 يستجيب بشكل صحيح عند تحديد أو إلغاء تحديد الـcheckbox، مع تحديث حالة الاقتراح في قاعدة البيانات باستخدام الخدمة المناسبة.