Angular: Display Symbols Conditionally in ng-repeat

في Angular، يمكنك تحقيق هذا السلوك بسهولة باستخدام التوجيهات (directives) والتفاصيل الشخصية في قالب السيطرة. يمكننا استخدام توجيهة ngIf للتحقق من قيمة خاصية isDeveloper وعرض الرمز المناسب استنادًا إلى القيمة.

لنقم أولاً بإنشاء توجيهة مخصصة لتنفيذ هذا السلوك. سنسمي هذه التوجيهة “developer-status”. يمكننا تحديد هذه التوجيهة باستخدام ngIf لفحص قيمة isDeveloper وعرض الرمز المناسب.

typescriptCopy code
// developer-status.directive.ts

import { Directive, Input, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[developerStatus]'
})
export class DeveloperStatusDirective {
  @Input() set developerStatus(value: number) {
    this.updateSymbol(value);
  }

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  private updateSymbol(value: number): void {
    // Remove any existing symbols
    this.renderer.setProperty(this.el.nativeElement, 'innerText', '');

    // Add the appropriate symbol based on the value
    if (value === 1) {
      this.renderer.createElement('span');
      this.renderer.addClass(this.el.nativeElement, 'developer-symbol');
      this.renderer.appendChild(this.el.nativeElement, this.renderer.createText('✔'));
    } else if (value === 0) {
      this.renderer.createElement('span');
      this.renderer.addClass(this.el.nativeElement, 'developer-symbol');
      this.renderer.appendChild(this.el.nativeElement, this.renderer.createText('❌'));
    }
  }
}

ثم نحتاج إلى تحديد هذه التوجيهة في مكان مناسب في تطبيق Angular الخاص بك. يمكنك فعل ذلك في وحدة Angular (module) الخاصة بتطبيقك.

typescriptCopy code
// your.module.ts

import { NgModule } from '@angular/core';
import { DeveloperStatusDirective } from './path-to-developer-status.directive';

@NgModule({
  declarations: [
    // ... other components, directives, and pipes
    DeveloperStatusDirective,
  ],
  // ... other module properties
})
export class YourModule { }

الآن يمكنك استخدام هذه التوجيهة في قالب الجدول الخاص بك كالتالي:

htmlCopy code


<table>
  <thead>
    <tr>
      <th>Employee Nameth>
      <th>Is Developerth>
    tr>
  thead>
  <tbody>
    <tr *ngFor="let employee of employees">
      <td>{{ employee.name }}td>
      <td [developerStatus]="employee.isDeveloper">td>
    tr>
  tbody>
table>

عند القيام بذلك، يتم الآن استخدام التوجيهة المخصصة developerStatus لعرض الرمز المناسب بناءً على قيمة isDeveloper في كل صف. يمكنك أيضاً تخصيص التصميم والأسلوب حسب احتياجاتك من خلال CSS.

بالطبع، يمكنني توفير المزيد من المعلومات بشكل أوسع حول كيفية إظهار رموز الصح والخطأ بشكل شرطي في Angular عند استخدام ng-repeat. للقيام بذلك، يمكنك الاعتماد على توجيهات مرنة داخل الإطار العمل Angular.

أحد الطرق التي يمكنك استخدامها لتحقيق هذا الهدف هو استخدام ngIf لفحص قيمة خاصية isDeveloper في كل صف، ثم عرض الرمز المناسب استنادًا إلى هذه القيمة. فيما يلي مثال على كيفية تنفيذ ذلك:

htmlCopy code
<table>
  <thead>
    <tr>
      <th>Nameth>
      <th>Roleth>
      <th>Developer Statusth>
    tr>
  thead>
  <tbody>
    <tr ng-repeat="employee in employees">
      <td>{{ employee.name }}td>
      <td>{{ employee.role }}td>
      <td>
        <span ng-if="employee.isDeveloper === 1">✔  span>
        <span ng-if="employee.isDeveloper === 0">✘  span>
      td>
    tr>
  tbody>
table>

في هذا المثال، تم استخدام ng-if لعرض إما رمز الصح “✔” أو رمز الخطأ “✘” اعتمادًا على قيمة خاصية isDeveloper في كل صف. يمكنك تخصيص هذا الرمز بحسب تفضيلاتك.

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