جافاسكريبت - كيفية التكرار على خصائص الكائن باستخدام ngFor في Angular

هذه المشاركة تتعلق بمشكلة مثيرة للاهتمام وجدتها في العمل.

إذا لم تكن تعرفه بعد. أنا أتحدث عن Angular 2+

المشكلة

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

    { 
  "car" : 
    { 
       "color" : "red",
       "model" : "2013"
    },
   "motorcycle": 
    { 
       "color" : "red",
       "model" : "2016"
    },
   "bicycle": 
    { 
       "color" : "red",
       "model" : "2011"
    }
}

ثم تحاول استخدام *ngFor ولكن تظهر رسالة خطأ مفاجئة:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

قد تصلحه في الخلفية بحيث تحصل على مصفوفة من الكائنات، لكن لا أحد لديه وقت لذلك. لا تقلق يا طفل، لقد اعتنيت بنا.

الإجابة رقم 1

في Angular 6.1 تم تقديم KeyValuePipe الذي يتيح لك تكرار خصائص الكائن:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

المستندات: https://angular.io/api/common/KeyValuePipe

الإجابة رقم 2

لا أعرف إذا كان هذا آمنًا، لكن بالنسبة لهذه الحالات البسيطة لا أحب حل الأنبوب، لذا عادةً ما أستخدم:

<div *ngFor="let k of objectKeys(yourObject)">
    {{yourObject[k].color}}
</div>

وفي وحدة التحكم:

objectKeys(obj) {
    return Object.keys(obj);
}

هذه حالة شائعة جدًا، لا أفهم لماذا لا توجد طريقة تنفيذ قياسية لهذا مثلما هو في Angular.js 1.x

الإجابة رقم 3

الحل الأفضل سيكون استخدام أنبوب مثل هذا:

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Convert Object to array of keys.
 */
@Pipe({
  name: 'appProperties'
})
export class PropertiesPipe implements PipeTransform {

  transform(value: {}): string[] {

    if (!value) {
      return [];
    }

    return Object.keys(value);
  }
}

ثم في قالبك:

<div *ngFor="let property of response | appProperties">
    <div *ngFor="let item of response[property]">
         {{item.something}}
    </div>
</div>

الإجابة رقم 4

    <div *ngFor="let item of donation_list | keyvalue">
        <div class="donation-box">
             <Label class="donation-label">Date : {{item.value.PaymentDate}}</Label>
             <Label class="donation-label">Time : {{item.value.PaymentTime}}</Label>

        </div>
   </div>

إذا كان لديك المزيد من الخصائص داخل الكائن، يمكنك استخدامه هكذا.