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

Question

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

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

Comments

इसे बदलने की कोशिश करें <div * ngFor = "बातचीत में बात करें"> इस <div * ngFor = "चलो बातचीत की बात करें"> ध्यान दें: "की" में "के लिए"

— Ishimwe Aubain Consolateur

मुझे लगता है कि आप C # / Java बैकग्राउंड से हैं, मैंने इसके बजाय का उपयोग करने की गलती की है

— अभय धर

Answer 1

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

मैंने एनजीफ़ोर अभिव्यक्ति के inबजाय टाइप किया of।

2-beta.17 के लिए , यह होना चाहिए:

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

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

---

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

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

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

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

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

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

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

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

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

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

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

Comments

और हाँ, चर को याद करने #से पहले talk(जैसा कि आपके कहा: "आशा है कि यह किसी और को सड़क से नीचे उतरने में मदद करता है ... शायद मैं!")

— नोबिता

@ नोबीता, हाँ, कि एक ने मुझे उतनी ही बार फँसाया है। मैंने इसके लिए एक प्रश्नोत्तर भी लिखा: stackoverflow.com/questions/34012291/…

— मार्क राजकोक

इतना बदबूदार जब आपको एहसास होता है ... मुझे लगता है कि यह वास्तव में प्रति-सहज है, इसलिए इसे शैली के लिए उपयोग किया जाता है। अगर मैं कर सकता, तो मैं आपके प्रश्नोत्तर पदों को अधिक वोट देता, धन्यवाद

— पीट

धन्यवाद मार्क। यह सबसे बड़ी त्रुटि संदेश नहीं है - जैसे WTF "ngForIn" का मतलब क्या है?! लेकिन रेट्रोस्पेक्ट में, डुह! इससे पहले कि मैं आपके प्रश्नोत्तर का पता लगाता, मैं 20 मिनट तक इसके साथ कुश्ती लड़ता।

— मेथडियन

मैं मानता हूं कि जवाब दोनों के पास होना चाहिए। लेकिन मैंने इसके उत्तर को स्पष्ट करने के लिए अद्यतन किया कि बीटा १. synt पोस्ट सिंटैक्स अलग है। (मैंने इसके चारों ओर अदला-बदली करना बंद कर दिया है इसलिए नवीनतम सबसे पहले है)। इसके बजाय मैंने सिर्फ एक छोटा सा नोट डाला। पहली नज़र में, एक नवागंतुक को नवीनतम वाक्यविन्यास का एहसास नहीं हो सकता है। इसका एक मामूली बदलाव है, लेकिन एक बड़ा अंतर है

— redfox05

Answer 2

टी एल; डॉ;

Let ... की जगह Let ... का प्रयोग करें ... !!

---

यदि आप कोणीय (> 2.x) के लिए नए हैं और संभवतः Angular1.x से माइग्रेट कर रहे हैं, तो सबसे अधिक संभावना है कि आप के inसाथ भ्रमित हो रहे हैं of। एंड्रियास नीचे टिप्पणी में उल्लेख किया गया है for ... ofसे अधिक दोहराता values की , जबकि एक वस्तु for ... inदोहराता से अधिक properties में एक वस्तु। यह ES2015 में पेश किया गया एक नया फीचर है।

बस बदलें:

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

साथ में

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

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

Comments

एक तरफ के रूप में - किसी को भी "के", "इन" के उपयोग के पीछे का कारण पता है कि यहां अधिक प्राकृतिक विकल्प लगता है।

— मोरवेल

@ ममसौदी @ मोरवेल यह अंतर है कि ऑब्जेक्ट के मानों की पुनरावृति for..inकरते समय ऑब्जेक्ट की कुंजियों / गुणों को प्रदर्शित for...ofकरता है। for(prop in foo) {}के रूप में ही है for(prop of Object.keys(foo)) {}। यह ECMA स्क्रिप्ट 2015 / ES6 की एक नई भाषा सुविधा है। तो यह केवल एक कोणीय मुद्दा है।

— एंड्रियास बॉमगार्ट

यह तब होता है जब आप सी # में सालों से कोडिंग करते आ रहे हैं और फिर कोणीय पर चले जाते हैं

— समुराईजैक

समाधान के सही ढंग से काम कर रहा है, धन्यवाद

— withoutOne

Answer 3

import { CommonModule } from '@angular/common';कोणीय अंतिम रूप में आयात करने की कोशिश करें *ngFor, *ngIfसभी में मौजूद हैंCommonModule

Comments

मुझे लगता है कि यह जवाब आजकल ओपी शीर्षक में त्रुटि प्राप्त करने का अधिक सामान्य कारण होगा।

— जी। स्टोयनेव

Answer 4

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

Answer 5

मेरे समस्या थी, कि दृश्य स्टूडियो किसी भी तरह स्वचालित रूप से लोवरकेस *ngFor को *ngforकॉपी और पेस्ट पर।

Answer 6

यदि आप उपयोग करना चाहते हैं ofऔर स्विच नहीं करना चाहते हैं तो एक विकल्प है in। आप KeyValuePipe6.1 में पेश किए गए उपयोग कर सकते हैं । आप आसानी से एक वस्तु पर पुनरावृति कर सकते हैं:

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

Answer 7

क्यू: 'pSelectableRow' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'tr' की ज्ञात संपत्ति नहीं है।

एक: आप ngmodule में primeng tabulemodule को कॉन्फ़िगर करने की आवश्यकता है

Answer 8

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

<div ngFor="let talk in talks">