angular - الاستثناء الزاوي: لا يمكن الارتباط بـ "ngForIn" نظرًا لأنه ليس خاصية أصلية معروفة




angular2-directives (4)

إذا كنت مستخدمًا جديدًا لـ Angular (> 2.x) ومن المحتمل أن تهاجر من Angular1.x ، فمن المرجح أنك in حيرة of . كما ذكر andreas في التعليقات أدناه for ... of التكرارات على values كائن أثناء for ... in التكرارات على properties في كائن. هذه هي ميزة جديدة قدم في ES2015.

ببساطة استبدال:

<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">

مع

<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">

لذلك ، يجب استبداله of داخل ngFor التوجيه للحصول على القيم.

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

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

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="let talk in 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 'ngForIn' since it isn't a known native property
("<div [ERROR ->]*ngFor="let talk in talks">

حاول استيراد import { CommonModule } from '@angular/common'; في نهاية الزاوي كما * ngFor ، * ngIf كلها موجودة في CommonModule


كان الحل الخاص بي - فقط إزالة حرف "*" من التعبير ^ __ ^

<div ngFor="let talk in talks">

كانت مشكلتي ، أن Visual Studio بطريقة ما خفضت تلقائيا * ngFor to * ngfor on copy and paste.





angular2-directives