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

286

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

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

— राज रजोक
स्रोत

644

मैं letसामने से चूक गया talk:

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

ध्यान दें कि NgFor#... जैसे संरचनात्मक निर्देशों के अंदर स्थानीय चरों को घोषित करने के बीटा.17 उपयोग के रूप में पदावनत किया जाता है। letइसके बजाय उपयोग करें ।

<div *ngFor="#talk of talks"> अब बन जाता है <div *ngFor="let talk of talks">

मूल उत्तर:

मैं #सामने से चूक गया talk:

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

इसे भूलना इतना आसान है #। मैं चाहूंगा कि कोणीय अपवाद त्रुटि संदेश इसके बजाय कहेंगे
you forgot that # again:।

— राज रजोक
स्रोत

वास्तव में एम्परसेंड किस लिए है? मैंने अपने स्वयं के मुद्दे तय किए, लेकिन मैं इस बात से अनिश्चित हूं कि यह क्या करता है।

— datatype_void

4

@datatype_void, हैश ( #) का उपयोग स्थानीय टेम्प्लेट चर

— मार्क राजकॉक

मैंने "लेट" सिंटैक्स का उपयोग करने की कोशिश की # के बजाय इसे "एनजाइंडर के लिए बांध नहीं सकता" क्योंकि यह एक ज्ञात मूल संपत्ति नहीं है। जैसा कि आपने अपने मूल प्रश्न में देखा था वैसा ही व्यवहार। मैंने इसे वापस # में बदल दिया और यह बिना किसी मुद्दे के काम करने लगा। मैं angular2.0.0-rc.1 का उपयोग कर रहा हूं और मुझे angular2.0.0-beta.17 के साथ भी यही व्यवहार मिला है

— Chadley08

1

@ Chadley08, एक प्लंकर बनाएँ। यह काम करना चाहिए। यहाँ एक rc.1 पंकर और एक बीटा.17 प्लंकर है जो दोनों ठीक काम करते हैं।

— मार्क राजकॉक

यहाँ त्रुटि संदेश के बारे में एक कोणीय मुद्दा भ्रामक है: github.com/angular/angular/issues/10644

— अलेक्जेंडर टेलर

79

ओपी की त्रुटि के कारण एक अन्य टाइपो का उपयोग किया जा सकता है in:

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

आपको ofइसके बजाय उपयोग करना चाहिए :

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

— अलेक्जेंडर अबाकुमोव
स्रोत

21

यह कथन Angular2 बीटा संस्करण में उपयोग किया गया है .....

इसके बाद # के बजाय उपयोग करने दें

जाने कीवर्ड स्थानीय चर घोषित करने के लिए प्रयोग किया जाता है

— नवीन
स्रोत

13

मेरे मामले में, यह एक छोटा सा पत्र था f। मैं यह उत्तर सिर्फ इसलिए साझा कर रहा हूं क्योंकि यह Google पर पहला परिणाम है

लिखना सुनिश्चित करें *ngFor

— मोहम्मद कवसरा
स्रोत

10

कोणीय 7 में .module.tsफाइल में इन पंक्तियों को जोड़कर इसे ठीक किया गया :

import { CommonModule } from '@angular/common'; imports: [CommonModule]

— अल्फर्ड नोबेल
स्रोत

2

आश्चर्य यह अधिक upvotes नहीं है। पूरी तरह से मेरे एक मॉड्यूल में CommonModule आयात करना भूल गया और खुद इस त्रुटि में भाग गया।

— एलन रुफोलो

8

आपको स्थानीय चरों को घोषित करने के लिए कीवर्ड का उपयोग करना चाहिए जैसे * ngFor = "बात करने दें"

— Rsona
स्रोत

5

मेरे लिए, एक लंबी कहानी को छोटा करने के लिए, मैंने अनजाने में कोणीय-बीटा -16 को डाउनग्रेड कर दिया था।

आज्ञा देना ... वाक्यविन्यास केवल 2.0.0-beta.17 + में मान्य है

यदि आप इस संस्करण के नीचे किसी भी चीज पर वाक्य रचना को आजमाते हैं। आप यह त्रुटि उत्पन्न करेंगे।

या तो कोणीय-बीटा -17 में अपग्रेड करें या आइटम सिंटैक्स में # साइट का उपयोग करें।

— शॉन
स्रोत

5

मेरे मामले में मैंने *ng-for=डॉक्स से कॉपी करने की गलती की ।

https://angular.io/guide/user-input

अगर मैं ग़लत हूं तो मेरी गलती सुझाएं। लेकिन लगता *ng-for=है इसे बदल दिया गया है*ngFor=

— क्रिस होलेनबेक
स्रोत

2

मैं " @Input " ( दोह !) के साथ अपने घटक का सत्यानाश करना भूल गया ।

book-list.component.html (आपत्तिजनक कोड):

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

पुस्‍तक-मद.कॉम.कॉम का सही संस्‍करण :

import { Component, OnInit, Input } from '@angular/core';

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}

— paulsm4
स्रोत

2

इसमें भी टाइप टाइपस्क्रिप्ट का उपयोग करने की कोशिश न करें ... मैं forउपयोग और उपयोग करने के लिए अधिक पत्राचार करना चाहता था *ngFor="const filter of filters"और एनजीफ़ोर को एक ज्ञात संपत्ति त्रुटि नहीं मिली। बस कांस्ट की जगह लेट काम कर रहा है।

जैसा कि @ अलेक्जेंडर-अबाकुमोव ने ofप्रतिस्थापित करने के लिए कहा in।

— shamox
स्रोत

मेरा मुद्दा "मैं इस्तेमाल कर रहा था" के बजाय "

— इश्म्वे औबैन सांत्वना लेखक

0

मेरे मामले में, इस त्रुटि के परिणामस्वरूप * ngFor का उपयोग करने वाले घटक वाले मॉड्यूल को app.module.ts में शामिल नहीं किया गया था। आयात सरणी में इसे शामिल करने से मेरे लिए समस्या हल हो गई।

— रॉय टौव
स्रोत

0

बस एक और मामला है जब मैं एक ही त्रुटि हो रही थी और कारण उपयोग कर रहा था कवर करने के लिए में के बजाय की इटरेटर में

गलत रास्ता let file in files

सही तरीका let file of files

— रॉबिन माथुर
स्रोत

0

इसे इस्तेमाल करो

<div *ngFor="let talk of talks> 
   {{talk.title}} 
   {{talk.speaker}}
   <p>{{talk.description}} 
</div>

आपको किसी ऑब्जेक्ट की एक सरणी पर परिवर्तन करने के लिए चर निर्दिष्ट करने की आवश्यकता है

— अक्षय एस पाटिल
स्रोत