কৌণিক ব্যতিক্রম: এটি 'এনজিফোর্ডইন' এর সাথে আবদ্ধ হতে পারে না কারণ এটি কোনও পরিচিত দেশীয় সম্পত্তি নয়


354

আমি কি ভুল করছি?

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

3
এই <ডিভ * এনজিফোর্স = "আলাপে কথা বলুন"> এ <ডিভ * এনজিফোর্স = "আলাপের কথা বলুন"> নোট করুন: "ইন" এর "
ইশিম্বু আউবাইনের কনসোলেটর

আমার ধারণা আপনি সি # / জাভা ব্যাকগ্রাউন্ড থেকে এসেছেন, আমি অফ-এর পরিবর্তে ব্যবহার করার একই ভুলটি করেছি
অভয় ধর

উত্তর:


698

যেহেতু এই সমস্যাটিতে আমি কমপক্ষে তৃতীয়বারের মতো 5 মিনিটেরও বেশি সময় নষ্ট করেছি আমি অনুভব করেছি যে আমি প্রশ্নোত্তর পোস্ট করব আমি আশা করি এটি অন্য কাউকে রাস্তায় নামাতে সাহায্য করবে ... সম্ভবত আমার!

আমি এনজিফোর্ড এক্সপ্রেশন inপরিবর্তে টাইপ করেছি of

2-বিটা.17 এর জন্য , এটি হওয়া উচিত:

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

Beta.17 হিসাবে, letপরিবর্তে বাক্য গঠন ব্যবহার করুন #। আরও তথ্যের জন্য আপডেটটি আরও নীচে দেখুন।


নোট করুন এনজিফোর্ড সিনট্যাক্স "desugars" নিম্নলিখিত মধ্যে:

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

আমরা যদি এর inপরিবর্তে ব্যবহার করি তবে এটি পরিণত হয়

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

যেহেতু ngForInএকই নামের কোনও ইনপুট সম্পত্তি (যেমন ngIf) এর সাথে কোনও অ্যাট্রিবিউট ডিরেক্টর নয় , অ্যাংুলার তখন এটি দেখার চেষ্টা করে যে এটি কোনও templateউপাদানটির (পরিচিত নেটিভ) সম্পত্তি কিনা এবং এটি ত্রুটি নয়।

আপডেট - 2-বিটা.17 হিসাবে, letপরিবর্তে সিনট্যাক্সটি ব্যবহার করুন #। এই নিম্নলিখিত আপডেট:

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

নোট করুন এনজিফোর্ড সিনট্যাক্স "desugars" নিম্নলিখিত মধ্যে:

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

আমরা যদি এর inপরিবর্তে ব্যবহার করি তবে এটি পরিণত হয়

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

7
এবং হ্যাঁ, মনে রাখবেন# আগে talk: পরিবর্তনশীল (হিসাবে আপনার বলেন, "আশা অন্য কেউ রাস্তায় সাহায্য করে ... সম্ভবত আমাকে!")
Nobita

2
@ নোবিতা, হ্যাঁ, তিনি আমাকে প্রায়শই ছড়িয়ে দিয়েছেন। : আমি খুব Q & A- যে এক লিখেছেন stackoverflow.com/questions/34012291/...
মার্ক Rajcok

2
আপনি যখন বুঝতে পারবেন তখন খুব দুর্গন্ধযুক্ত স্পষ্ট মনে হচ্ছে ... আমি এটি সত্যিই বিপরীতমুখী বলে মনে করি, তাই অভ্যন্তরীণ শৈলীতে অভ্যস্ত। আমি যদি আপনার প্রশ্নোত্তর পোস্টগুলিতে আরও ভোট দিতে পারি তবে আমি ধন্যবাদ জানাতে পারি
পিট

1
ধন্যবাদ মার্ক। এটি সর্বাধিক ত্রুটি বার্তা নয় - যেমন ডাব্লুটিএফ "এনজিফোর্ডইন" বলতে বোঝাচ্ছে !? কিন্তু পিছনে, দুহ! আপনার প্রশ্নোত্তর সন্ধানের 20 মিনিটের আগে আমি এর সাথে কুস্তি করেছিলাম।
মেথোডিশিয়ান

2
আমি একমত যে উত্তর দুটি হওয়া উচিত। তবে আমি আরও উত্তরটি আরও আপডেট করেছিলাম এটি পরিষ্কার করে তুলতে যে বিটা .১ post পোস্টের বাক্য গঠনটি ভিন্ন। (আমি এর চারপাশে অদলবদল বন্ধ করেছিলাম তাই সর্বশেষতমটি প্রথম is পরিবর্তে আমি কেবল একটি ছোট নোট রেখেছি first প্রথম নজরে, একজন নতুন আগত সাম্প্রতিক সিনট্যাক্সটি বুঝতে পারে না। এটি একটি সামান্য পরিবর্তন তবে একটি বড় পার্থক্য
redfox05

287

টি এল; ডিআর;

ব্যবহারের যাক ... এর পরিবর্তে যাক ... মধ্যে !!


আপনি যদি কৌণিক (> 2.x) এ নতুন হন এবং সম্ভবত অ্যাংুলার 1.x থেকে স্থানান্তরিত হন তবে সম্ভবত আপনি বিভ্রান্ত inহয়ে যাচ্ছেন of। আন্দ্রিয়াস নীচের মন্তব্য উল্লেখ দিয়েছেন for ... ofউপর iterates values এর সময় একটি বস্তু for ... initerates উপর 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">

সুতরাং, মানগুলি পেতে আপনাকে অবশ্যই অভ্যন্তরীণ নির্দেশের সাথে প্রতিস্থাপনinof করতে হবে ngFor


2
একদিকে যেমন - কেউ কি "এর", "ইন" ব্যবহারের পিছনে কারণটি জানে এটি আরও প্রাকৃতিক পছন্দ বলে মনে হয়।
মরভেল

2
@ মামসৌদি @ মোরভেল পার্থক্যটি হ'ল for..inবস্তুর কীগুলি / বৈশিষ্ট্যগুলিকে for...ofপুনরাবৃত্তি করে যখন বস্তুর মানগুলি পুনরাবৃত্তি করে। for(prop in foo) {}হিসাবে একই for(prop of Object.keys(foo)) {}। এটি ECMA স্ক্রিপ্ট 2015 / ES6 এর একটি নতুন ভাষার বৈশিষ্ট্য। সুতরাং এটি কেবল দূরবর্তীভাবে একটি কৌণিক সমস্যা।
Andreas Baumgart

আপনি যদি বছরের পর বছর সি # তে কোডিং করে তারপর
কৌণিকের

সমাধানটি সঠিকভাবে কাজ করছে, ধন্যবাদ
একক ছাড়াই

13

আমদানি করার চেষ্টা import { CommonModule } from '@angular/common';কৌণিক চূড়ান্ত হিসেবে *ngFor, *ngIfসব বর্তমান রয়েছেCommonModule


আমি মনে করি ওপি শিরোনামে ত্রুটি পাওয়ার জন্য আজকাল এই উত্তরটি আরও সাধারণ কারণ হবে।
জি স্টোনেভ

11

আমার ক্ষেত্রে, ওয়েবস্ট্রম অটো-সম্পূর্ণ স্বয়ংক্রিয়ভাবে সন্নিবেশ করানো নিম্নতর হয়েছে *ngfor, এমনকি যখন মনে হয় আপনি সঠিক উট কেসড বেছে নিয়েছেন ( *ngFor)।


6

আমার সমস্যা ছিল, যে ভিসুয়াল স্টুডিও একরকম স্বয়ংক্রিয়ভাবে lowercased *ngFor করতে *ngforকপি ও পেস্ট করুন।


1

আপনি যদি ব্যবহার করতে চান ofএবং স্যুইচ না করতে চান তবে একটি বিকল্প রয়েছে in। আপনি KeyValuePipe6.1 সালে চালু ব্যবহার করতে পারেন । আপনি সহজেই কোনও বস্তুর মাধ্যমে পুনরাবৃত্তি করতে পারেন:

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

-3

প্রশ্ন: 'পিলেক্টেবল রো'-তে আবদ্ধ হতে পারে না কারণ এটি' ট্র 'এর পরিচিত সম্পত্তি নয়।

উত্তর: আপনাকে এনজিএমডিউলে প্রাইমং ট্যাবুলেড মডিউল কনফিগার করতে হবে


-15

আমার সমাধানটি ছিল - শুধু '*' অক্ষরটি ^ __ ^ থেকে মুছে ফেলুন ^

<div ngFor="let talk in talks">
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.