angular - استثناء: لا يمكن الربط بـ 'ngFor' لأنه ليس خاصية أصلية معروفة

ما الخطأ الذي أفعله؟

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

الخطأ هو

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

الإجابة رقم 1

لقد فاتني let أمام talk:

<div *ngFor="let talk of talks">

لاحظ أنه اعتبارًا من beta.17 أصبح استخدام #... لإعلان المتغيرات المحلية داخل التوجيهات الهيكلية مثل NgFor مهجورًا. استخدم let بدلاً من ذلك.

<div *ngFor="#talk of talks"> يصبح الآن <div *ngFor="let talk of talks">

الإجابة الأصلية:

فاتني # أمام talk:

<div *ngFor="#talk of talks">

من السهل جدًا أن ننسى أن #. أتمنى أن تقول رسالة خطأ استثناء Angular بدلاً من ذلك:
لقد نسيت # مرة أخرى.

الإجابة رقم 2

خطأ مطبعي آخر يؤدي إلى خطأ المستخدم الأصلي قد يكون استخدام in:

<div *ngFor="let talk in talks">

يجب أن تستخدم of بدلاً من ذلك:

<div *ngFor="let talk of talks">

الإجابة رقم 3

يُستخدم هذا البيان في إصدار Angular2 التجريبي.....

من الآن فصاعدًا استخدم let بدلاً من #

تُستخدم الكلمة المفتاحية let لإعلان متغير محلي

الإجابة رقم 4

في Angular 7 تم حل هذا بإضافة هذه الأسطر إلى ملف .module.ts:

استيراد { CommonModule } من '@angular/common'; الاستيرادات: [CommonModule]

الإجابة رقم 5

في حالتي، كانت حرف صغير f. أنا أشارك هذا الجواب فقط لأنه أول نتيجة على جوجل

تأكد من كتابة *ngFor