angular - কৌণিক ব্যতিক্রম: 'ngForIn' এ আবদ্ধ হতে পারে না কারণ এটি একটি পরিচিত স্থানীয় সম্পত্তি নয়




angular2-directives (6)

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

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

টি এল; ডিআর;

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

আপনি যদি Angular (> 2.x) তে নতুন হন এবং সম্ভবত Angular1.x থেকে স্থানান্তরিত হয়, সম্ভবত আপনি এতে বিভ্রান্ত of । আন্ডারাসের for ... 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">

সুতরাং, আপনি মান পেতে ngFor নির্দেশিকা সঙ্গে প্রতিস্থাপন করতে হবে।


আমার ক্ষেত্রে, WebStrom স্বতঃপূর্ণ নিম্নচরিত্র *ngfor সন্নিবেশ করানো হয়েছে, এমনকি যখন মনে হচ্ছে আপনি সঠিক উটটি *ngFor ( *ngFor )।


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

<div ngFor="let talk in talks">

এর পরিবর্তে:

  template: `<div *ngFor="let talk in talks">

এর ব্যবহার:

  template: `<div *ngFor="let talk of talks">

এই সমস্যা সমাধান করে আশা করি।


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

আমি ngFor অভিব্যক্তি পরিবর্তে টাইপ।

Befor 2-বিটা.17 , এটি হওয়া উচিত:

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

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

উল্লেখ্য যে ngFor সিনট্যাক্স "desugars" নিম্নলিখিত মধ্যে:

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

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

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

যেহেতু ngForIn একই নামের একটি ইনপুট সম্পত্তি (যেমন ngIf ) সহ একটি বৈশিষ্ট্য নির্দেশনা নয়, তখন কৌণিক তারপর এটি template উপাদানটির একটি (পরিচিত স্থানীয়) সম্পত্তি কিনা তা দেখার চেষ্টা করে এবং এটি ত্রুটি নয়।

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

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

উল্লেখ্য যে ngFor সিনট্যাক্স "desugars" নিম্নলিখিত মধ্যে:

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

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

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

import { CommonModule } from '@angular/common'; করার চেষ্টা করুন import { CommonModule } from '@angular/common'; *ngFor হিসাবে *ngFor চূড়ান্ত, *ngIf সমস্ত *ngIf উপস্থিত CommonModule






angular2-directives