'NgForOf' के लिए बाध्य नहीं किया जा सकता क्योंकि यह 'tr' (अंतिम रिलीज) की ज्ञात संपत्ति नहीं है

Question

मैं Angular2 फाइनल रिलीज (2.1.0) का उपयोग कर रहा हूं। जब मैं कंपनियों की सूची प्रदर्शित करना चाहता हूं, मुझे यह त्रुटि मिली।

में file.component.ts:

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

में file.component.html:

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Comments

सुनिश्चित करें कि आपने टाइपो नहीं बनाया ngforहै, जो आपके द्वारा बताई गई त्रुटि है। होना चाहिएngFor

— पिओट्र कुला

कोणीय भी संवेदनशील है।

— इफ्तिखार अली अंसारी

Answer 1

जोड़े BrowserModuleको imports: []में @NgModule()अगर यह जड़ मॉड्यूल (है AppModule), नहीं तो CommonModule।

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

Comments

हाँ मेरे पास कई मॉड्यूल हैं। मैं यह भूल गया। अब यह काम करता है :) धन्यवाद u

— मूराद इदरीसी

यह उल्लेखनीय है कि कॉमनमॉडल '@ कोणीय / आम' में स्थित है, इसलिए आपको '@ कोणीय / आम' से आयात {कॉमनमॉडल} को जोड़ना सुनिश्चित करना चाहिए

— शूरवीर

मेरा भी ऐसा ही मुद्दा था। मेरे ऐप में एक से अधिक मॉड्यूल हैं, आयात ब्राउज़र मॉड्यूल स्टेटमेंट को ऐप मॉड्यूल और किसी अन्य मॉड्यूल में जोड़ा जाना चाहिए।

— ssmsnet

मेरे पास कई मॉड्यूल थे। मेरा दिन बच गया। धन्यवाद!

— फैबियोफ्लोरेस 19

कभी-कभी यह एक सरल टाइपो हो सकता है, वही त्रुटि तब होती है जब "* ngFor =" यात्री या यात्रियों को "<--- नोटिस:" या "होना चाहिए" का ;-)

— michabbb

Answer 2

मेरे मामले में, मुद्दा यह था कि मेरी टीम के साथी ने *ngforइसके बजाय टेम्पलेट्स में उल्लेख किया था *ngFor। अजीब बात है कि इस मुद्दे को संभालने के लिए कोई सही त्रुटि नहीं है (In Angular 4)।

Comments

अच्छी तरह से जो मुझे पाश के लिए फेंक सकता था;)

— tony09uk

इसी तरह: मैंने लिखा है *ngFor="let diagram if diagrams", नोटिस if। एक "पार्स त्रुटि" संदेश बेहतर होगा ...

— केलेनियम

@klenium, आपने मेरा दिन बचाया! मुझे वह त्रुटि मिली जब उपयोग करते हुए *ngFor="lang in languages"कोणीय 8 की उम्मीद है *ngFor="let lang of languages"। सुंदर भ्रामक त्रुटि संदेश imo: /

— जोना पॉलस

Answer 3

आपको मॉड्यूल में 'कॉमनमॉडल' आयात करना होगा, जहां आप इन-इन-डायरेक्टेड निर्देशों का उपयोग कर रहे हैं जैसे एनजीफोर, एनजीआई आदि।

import { CommonModule } from "@angular/common";


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Comments

आप कहते हैं कि इसे घटक में आयात करें, फिर कोड को मॉड्यूल में आयात करते हुए दिखाएं

— क्रिस - हैडॉक्स टेक्नोलॉजिज

Answer 4

याद रखने वाली चीज़ें:

जब कस्टम मॉड्यूल का उपयोग किया जाता है (AppModule के अलावा अन्य मॉड्यूल) तो इसमें सामान्य मॉड्यूल को आयात करना आवश्यक है।

yourmodule.module.ts

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

Comments

क्या आप जानते हैं कि मुझे अपने बच्चे / कस्टम मॉड्यूल वर्ग के सामान्य ज्ञान होने के बाद भी उस त्रुटि / चेतावनी को क्रोम में वास्तव में क्यों मिलेगा?

— अक

Answer 5

यदि आप अपना खुद का मॉड्यूल बना रहे हैं तो अपने खुद के मॉड्यूल में आयात में कॉमनमॉडल जोड़ें

Comments

CommonModule को जोड़ना मेरे लिए काम करता है कृपया अपना उत्तर सुधारें। साथ ही शेयर स्टेप्स

— आशीष यादव

Answer 6

यह तब भी हो सकता है जब आप अपने फीचर मॉड्यूल में मार्ग घटक घोषित नहीं करते हैं। उदाहरण के लिए:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

ध्यान दें ViewComponent घोषणा सरणी में नहीं है, जबकि यह होना चाहिए।

Comments

धन्यवाद आदमी, यह मेरा मुद्दा नहीं था, लेकिन इसने मुझे एक संकेत और बिंगो दिया, मेरी समस्या हल हो गई है !!

— अभिनव सक्सेना

Answer 7

कस्टम मॉड्यूल को सामान्य मॉड्यूल की आवश्यकता होती है

"@ कोणीय / आम" से {CommonModule} आयात करें;

@NMModule ({आयात: [CommonModule]})

Answer 8

जब "app-routing.module" का उपयोग करते हैं तो हम "CommonModule" आयात को भूल जाते हैं। आयात करने के लिए याद रखें!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

Answer 9

मेरे पास एक ही त्रुटि थी लेकिन मेरे पास कॉमनमॉडल आयातित था। इसके बजाय मैंने एक अल्पविराम छोड़ दिया जहां यह मॉड्यूल को विभाजित करते समय कॉपी / पेस्ट के कारण नहीं होना चाहिए:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

Answer 10

app.module.ts तय और बदल गया: अपने ऐप मॉड्यूल में BrowserModule आयात करें

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

Answer 11

मुझे एक ही त्रुटि मिल रही थी, आप इस विधि से एक को ठीक कर सकते हैं:

1. यदि आपके पास कोई नेस्टेड मॉड्यूल नहीं है

   ए। अपने ऐप मॉड्यूल में CommonModule आयात करें

   ख। अपने कंपोनेंट को आयात करें जहां आप ऐप मॉड्यूल में * ngFor जोड़ रहे हैं , घोषणाओं में परिभाषित करें

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

सी। आप तो मार्ग आयात के लिए अलग मॉड्यूल फ़ाइल का उपयोग कर रहे हैं, तो CommonModule अपने रूटिंग मॉड्यूल में और आयात CommonModule अपने में अनुप्रयोग मॉड्यूल

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})

2. यदि आपके पास नेस्टेड मॉड्यूल है तो उस विशेष मॉड्यूल में पहला चरण निष्पादित करें

मेरे मामले में, दूसरी विधि ने मेरी समस्या हल कर दी।
आशा है कि यह आपकी मदद करेगा

Answer 12

मेरे लिए समस्या यह थी कि मैंने कस्टम मेड मॉड्यूल HouseModuleको अपने यहां आयात नहीं कियाapp.module.ts । मेरे पास दूसरे आयात थे।

फाइल: app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

Answer 13

भविष्य के पाठक

निम्नलिखित में से प्रत्येक की जाँच करें:

• घटक एक एकल में घोषित किया गया है कोणीय मॉड्यूल
• आप सुनिश्चित करें कि आपके पास import { CommonModule } from '@angular/common';
• IDE / संपादक को पुनरारंभ करें

Answer 14

मैं Angular8 बेस लाइव प्रोजेक्ट पर शुरू हुआ हूं, उपरोक्त मुद्दे को मिला है, लेकिन "ऐप-रूटिंगमॉडल" का उपयोग करते समय हम आयात "कॉमनमॉडल" को भूल जाते हैं। आयात करने के लिए याद रखें!

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
]})

यह आपकी त्रुटि को हल करेगा।

Answer 15

रुट्स का उपयोग करते समय आपकी समस्याएं दिखाई देती हैं, हम किसी भी मॉड्यूल की स्थैतिक सामग्री प्रदर्शित कर सकते हैं, लेकिन जब एआई कार्यशीलता का उपयोग करने की कोशिश कर रहे हैं जैसे * ngIg काम नहीं करता है, तो काम की जरूरत के लिए @Ruben Szeker की तरह, आवश्यकता होती है app.module.ts में घटक जोड़ना होगा आयात पर [], खत्म करने के लिए या सर्वर के लिए वास्तविकता निष्पादन एनजी और फिर से चलाना एनजी सेवा को मारने के लिए, समस्या को हल किया जाएगा। अगर यह आपके लिए काम नहीं करता है, तो मेरे लिए एक और तरीका है।

मुझे अपनी खराब अंग्रेजी के लिए खेद है।

Answer 16

मुझे ** के बजाय * की समस्या थी

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Comments

हां, वीएस कोड एक एकल के बजाय स्वचालित रूप से दो तारों को लगाने के लिए लगता है।

— अलेक्सी

Answer 17

मुझे एक समान त्रुटि का सामना करना पड़ा है (*ngIf ) भले ही मेरे सभी आयात ठीक थे और घटक को किसी अन्य त्रुटि के बिना प्रदान किया गया था + रूटिंग ठीक था।

मेरे मामले AppModuleमें उस विशिष्ट मॉड्यूल को शामिल नहीं किया गया था। अजीब बात यह है कि यह इस बारे में शिकायत नहीं करता था, लेकिन यह इस बात से संबंधित हो सकता है कि आइवी कैसे काम करता है ng serve(मार्ग के अनुसार एक प्रकार के लोड मॉड्यूल, लेकिन इसकी निर्भरता नहीं मानी जाती है)।

Answer 18

सिर्फ एक विशिष्ट पृष्ठ पर, इस त्रुटि पर ~ 1h खो दिया है। यहां सभी उत्तरों की कोशिश की, लेकिन अंत में समाधान एनजी के साथ पूरी बात का पुनर्निर्माण करना था, समस्या बस गायब हो गई ...

Answer 19

तो कृपया सुनिश्चित करें

1. निर्देशों में कोई सिंटैक्स त्रुटि नहीं

2. ब्राउज़र (ऐप मॉड्यूल में) और सामान्य (अन्य / बच्चे में) मॉड्यूल आयात किए जाते हैं (वही जो ऊपर बताए गए गंटर ज़ोचौएर हैं)

3. यदि आपने एप्लिकेशन में रूट किए हैं तो रूट मॉड्यूल को ऐप मॉड्यूल में आयात किया जाना चाहिए

4. सभी रूट किए गए घटक के मॉड्यूल भी अनुप्रयोग मॉड्यूल में आयात किए जाते हैं, उदाहरण के लिए: app-routing.module.ts इस प्रकार है:

   कास्ट रूट: रूट = [

   {पथ: '', घटक: CustomerComponent},

   {पथ: 'व्यवस्थापक', घटक: AdminComponent}

   ];

फिर ऐप मॉड्यूल को @NgModule () में CustomerComponent और AdminComponent के मॉड्यूल को आयात करना होगा।

Answer 20

यहां तक ​​कि मुझे भी इसी मुद्दे का सामना करना पड़ा, मैंने यहाँ पर सभी उत्तरों की कोशिश की, लेकिन एक साधारण बदलाव से मुझे इस मुद्दे को हल करने में मदद मिली, बजाय trटैग में * एनजीफ़ोर के , मैंने इसे tbodyटैग में शामिल किया । आशा है कि यह किसी की मदद करता है।

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>

Answer 21

बच्चे मॉड्यूल और घटक दोनों में CommonModule आयात करें