'এনজিফরফ'এফের সাথে আবদ্ধ হতে পারে না কারণ এটি' টিআর 'এর পরিচিত সম্পত্তি নয় (চূড়ান্ত প্রকাশ)

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

হ্যাঁ আমার একাধিক মডিউল রয়েছে। আমি এই ভুলে গেছি। এটি এখন কাজ করে :) আপনাকে ধন্যবাদ

— মুরাদ ইদ্রিসি

এটি উল্লেখযোগ্য হতে পারে যে কমনমডুলটি '@ কৌনিক / সাধারণ' তে অবস্থিত তাই আপনাকে অবশ্যই @ @ কৌনিক / সাধারণ "থেকে আমদানি {কমনমোডুল add যোগ করতে হবে তা নিশ্চিত করতে হবে

— অজানা

আমি একই সমস্যা ছিল। আমার অ্যাপ্লিকেশনটির একাধিক মডিউল রয়েছে, অ্যাপ্লিকেশন মডিউলে এবং অন্য মডিউলে আমদানি ব্রাউজার মডিউল বিবরণ যুক্ত করা দরকার।

— এসএমএসনেট

আমার একাধিক মডিউল ছিল। এটাই আমার দিন বাঁচল। ধন্যবাদ!

— ফ্যাবরিওফ্লোরিজ

কখনও কখনও এটি একটি সাধারণ টাইপও হতে পারে, "* এনজিফোর্ড =" যাত্রী বা যাত্রী যাক "করার সময় একই ত্রুটি ঘটে << লক্ষ্য করুন:" বা "" এর "হতে হবে; ;)

— ম্যাকাব্যাব

Answer 2

আমার ক্ষেত্রে বিষয়টি ছিল আমার সতীর্থ *ngforপরিবর্তে টেমপ্লেটে উল্লেখ করেছেন *ngFor। অদ্ভুত যে এই সমস্যাটি হ্যান্ডেল করার জন্য কোনও সঠিক ত্রুটি নেই (কৌণিক 4 এ)।

Comments

ভাল এটি আমাকে একটি লুপের জন্য ফেলে দিতে পারে;)

— টনি09uk

অনুরূপ: আমি লিখেছি *ngFor="let diagram if diagrams", লক্ষ্য করুন if। একটি "পার্স ত্রুটি" বার্তাটি আরও ভাল হবে ...

— ক্লেনিয়াম

@ ক্লেনিয়াম, আপনি আমার দিন বাঁচিয়েছেন! *ngFor="lang in languages"কৌনিক 8 আশা করে যেখানে ব্যবহার করার সময় আমি ত্রুটি পেয়েছি *ngFor="let lang of languages"। বেশ বিভ্রান্তিকর ত্রুটি বার্তা ইমো: /

— জোনা পলাস

Answer 3

আপনি মডিউলটিতে 'কমনমডুল' আমদানি করতে হবে যেখানে আপনি এনজিফোর্ড, এনজিআইএফ ইত্যাদির মতো এই অন্তর্নির্মিত দিকনির্দেশগুলি ব্যবহার করছেন in

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Comments

আপনি বলছেন এটি উপাদানটিতে আমদানি করুন, তারপরে মডিউলটিতে এটি আমদানি করার কোডটি দেখান

— ক্রিস - হ্যাডডাক্স টেকনোলজিস

Answer 4

মনে রাখার মতো ঘটনা:

যখন কাস্টম মডিউলগুলি ব্যবহৃত হয় (অ্যাপমোডিয়াল ব্যতীত অন্য মডিউলগুলি) তখন এটিতে সাধারণ মডিউলটি আমদানি করা প্রয়োজন।

yourmodule.module.ts

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

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

Comments

আপনি কি জানেন যে আমার বাচ্চা / কাস্টম মডিউল ক্লাসে প্রচলিত মডেল থাকার পরেও আমি ক্রোমে আসলে ত্রুটি / সতর্কতা কেন পাই?

— Ak777

Answer 5

আপনি যদি নিজের নিজস্ব মডিউল তৈরি করে থাকেন তবে আপনার নিজস্ব মডিউলটিতে আমদানিতে কমনমডুল যুক্ত করুন

Comments

কমনমডুল যুক্ত করা আমার পক্ষে কাজ করেছে দয়া করে আপনার উত্তরটি উন্নত করুন। পাশাপাশি পদক্ষেপগুলি ভাগ করুন

— আশীষ যাদব

Answer 6

আপনি যদি নিজের বৈশিষ্ট্য মডিউলে কোনও রুটের উপাদান ঘোষণা না করেন তবে এটিও ঘটতে পারে। উদাহরণস্বরূপ:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

লক্ষ্য করুন ViewComponent হয় না যেহেতু এটি হওয়া উচিত, ঘোষণা অ্যারের মধ্যে।

Comments

থ্যাঙ্কস ম্যান, এটি আমার সমস্যা ছিল না তবে এটি আমাকে একটি ইঙ্গিত এবং বিঙ্গো দিয়েছে, আমার সমস্যাটির সমাধান হয়েছে !!

— অভিনব সাক্সেনা

Answer 7

কাস্টম মডিউল সাধারণ মডিউল প্রয়োজন

"@ কৌণিক / সাধারণ" থেকে {কমনমোডুল od আমদানি করুন;

@ এনজিএমডিউল ({আমদানি: [কমনমডিউল]})

Answer 8

"অ্যাপ-রাউটিং.মডিউল" ব্যবহার করার সময় আমরা "কমনমডুল" আমদানি ভুলে যাই। আমদানি মনে রাখবেন!

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. আপনার যদি কোনও নেস্টেড মডিউল না থাকে

   ক। আপনার অ্যাপ মডিউলে কমনমডুল আমদানি করুন

   খ। আপনার কম্পোনেন্ট যেখানে আপনি যোগ করা হয় আমদানি করুন * 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. আপনার যদি নেস্টেড মডিউল থাকে তবে সেই নির্দিষ্ট মডিউলের 1 ম পদক্ষেপটি সম্পাদন করুন

আমার ক্ষেত্রে, 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';
• আইডিই / সম্পাদক পুনরায় চালু করুন

Answer 14

আমি Angular8 বেস লাইভ প্রকল্পে শুরু করেছি উপরের সমস্যাটি পেয়েছি তবে "অ্যাপ-রাউটিং.মডিউল" ব্যবহার করার সময় আমরা "কমনমডুল" আমদানি ভুলে যাই। আমদানি মনে রাখবেন!

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

@NgModule({
  imports: [
    CommonModule
]})

এটি আপনার ত্রুটিটি সমাধান করবে।

Answer 15

এই সমস্যাটি যখন রুটগুলি ব্যবহার করার সময় উপস্থিত হয়, আমরা যে কোনও মডিউলের স্থির সামগ্রী প্রদর্শন করতে পারি, তবে * এনজিআইজি যেমন অ্যানি ফাংশনালিটি ব্যবহার করার চেষ্টা করার সময় কাজ হয় না, কারণ @ রুবেন সিজেকারের মতো কাজের প্রয়োজন হবে, প্রয়োজনটি app.module.ts এ সংযোজন যুক্ত করবে need আমদানিতে [], বাস্তবতা নির্বাহের জন্য এনজি সার্ভারটি বন্ধ বা মেরে ফেলার জন্য এবং এনজি সার্ভার পুনরায় চেষ্টা করুন, সমস্যার সমাধান হবে। যদি এটি আপনার পক্ষে কাজ না করে তবে আমার অন্যভাবে চেষ্টা করুন।

আমার খারাপ ইংরাজির জন্য আমি দুঃখিত

Answer 16

** পরিবর্তে * এর কারণে আমার একটি সমস্যা হয়েছিল

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Comments

হ্যাঁ, ভিএস কোড মনে হচ্ছে স্বয়ংক্রিয়ভাবে এককটির পরিবর্তে দুটি তারা রেখে।

— আলেক্সি

Answer 17

আমার *ngIfসমস্ত আমদানি ঠিকঠাক থাকলেও এবং উপাদানটি অন্য কোনও ত্রুটি ছাড়াই রেন্ডার করা হয়েছিল এমনকি + + রাউটিং ঠিক ছিল a

আমার ক্ষেত্রে AppModuleসেই নির্দিষ্ট মডিউলটি অন্তর্ভুক্ত ছিল না। আশ্চর্যের বিষয় হ'ল এটি এ সম্পর্কে কোনও অভিযোগ করেনি, তবে এটি আইভির সাথে কীভাবে কাজ করে তার সাথে সম্পর্কিত হতে পারে ng serve(রাউটিং অনুসারে ধরণের লোড মডিউলগুলি, তবে এর নির্ভরতা বিবেচনা করা হয় না)।

Answer 18

এই ত্রুটিটিতে, কেবল একটি নির্দিষ্ট পৃষ্ঠায় সবেমাত্র h 1h হারিয়েছে। এখানে সমস্ত উত্তর চেষ্টা করে দেখুন, তবে শেষ অবধি সমাধানটি এনজি দিয়ে পুরো জিনিসটি পুনর্নির্মাণ করা হয়েছিল, সমস্যাটি কেবল অদৃশ্য হয়ে গেল ...

Answer 19

সুতরাং দয়া করে নিশ্চিত করুন

1. নির্দেশিকায় কোনও সিনট্যাক্স ত্রুটি নেই

2. ব্রাউজার (অ্যাপ মডিউলটিতে ) এবং প্রচলিত (অন্যান্য / শিশুদের) মডিউলগুলি আমদানি করা হয় ( উপরে উল্লিখিত গন্টার জ্যাচবাউয়ার একই )

3. আপনি যদি অ্যাপ্লিকেশনটিতে রুট করেন তবে রুট মডিউলটি অ্যাপ মডিউলটিতে আমদানি করা উচিত

4. সমস্ত রাউটেড উপাদানগুলির মডিউলটি অ্যাপ মডিউলটিতেও আমদানি করা হয়, যেমন: অ্যাপ-রাউটিং.মডিউল.টস নিম্নরূপ:

   কনস্ট রুট: রুটস = ​​[

   {পথ: '', উপাদান: গ্রাহকপরিষদ},

   {পথ: 'প্রশাসক', উপাদান: অ্যাডমিন কম্পোনেন্ট onent

   ];

তারপরে অ্যাপ্লিকেশন মডিউলটি অবশ্যই @NgModule () এ গ্রাহককম্পোন্ট এবং অ্যাডমিন কম্পোনেন্টের মডিউলগুলি আমদানি করতে হবে।

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

উভয় শিশু মডিউল এবং উপাদানগুলিতে কমনমডুল আমদানি করুন