angular - कोणीय अपवाद: 'ngForIn' से बंधे नहीं जा सकते क्योंकि यह ज्ञात मूल संपत्ति नहीं है




angular2-directives (4)

चूंकि यह कम से कम तीसरी बार है जब मैंने इस समस्या पर 5 मिनट से अधिक बर्बाद कर दिया है, मुझे लगा कि मैं क्यू एंड ए पोस्ट करूंगा। मुझे उम्मीद है कि यह सड़क के नीचे किसी और की मदद करेगी ... शायद मैं!

मैं ngFor अभिव्यक्ति के बजाय in टाइप in

Befor 2-beta.17 , यह होना चाहिए:

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

बीटा.17 के रूप में, # बजाए let सिंटैक्स का उपयोग करें। अधिक जानकारी के लिए अद्यतन नीचे देखें।

ध्यान दें कि ngFor वाक्यविन्यास "desugars" निम्नलिखित में है:

<template ngFor #talk [ngForOf]="talks">
  <div>...</div>
</template>

यदि हम इसके बजाय उपयोग करते हैं, तो यह बदल जाता है

<template ngFor #talk [ngForIn]="talks">
  <div>...</div>
</template>

चूंकि ngForIn एक ही नाम की इनपुट प्रॉपर्टी (जैसे ngIf ) के साथ एक विशेषता निर्देश नहीं है, इसलिए कोणीय यह देखने की कोशिश करता है कि यह template तत्व की एक (ज्ञात मूल) संपत्ति है, और यह त्रुटि नहीं है।

अद्यतन - 2-बीटा.17 के रूप में, # बजाए let सिंटैक्स का उपयोग करें। यह निम्न के लिए अद्यतन करता है:

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

ध्यान दें कि ngFor वाक्यविन्यास "desugars" निम्नलिखित में है:

<template ngFor let-talk [ngForOf]="talks">
  <div>...</div>
</template>

यदि हम इसके बजाय उपयोग करते हैं, तो यह बदल जाता है

<template ngFor let-talk [ngForIn]="talks">
  <div>...</div>
</template>

मैं क्या गलत कर रहा हूं?

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">

मेरा समाधान था - अभिव्यक्ति ^ __ ^ से सिर्फ '*' चरित्र को हटा दें

<div ngFor="let talk in talks">

मेरे मामले में, WebStrom ऑटो-पूर्ण डाला गया *ngfor , भले ही ऐसा लगता है कि आप सही ऊंट का चयन एक ( *ngFor ) *ngFor


यदि आप कोणीय (> 2.x) के लिए नए हैं और संभवतः Angular1.x से माइग्रेट कर रहे हैं, तो संभव है कि आप इसमें उलझन in of । जैसा कि एंड्रियास ने नीचे दी गई टिप्पणियों में उल्लेख किया है 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">

तो, मूल्यों को प्राप्त करने के लिए आपको अंदरूनी ngFor निर्देश के साथ प्रतिस्थापित करना होगा।







angular2-directives