* এনজিআইএফ এবং * এনজিফরার জন্য একই উপাদান ত্রুটি ঘটায়

Question

অ্যাংুলারগুলি ব্যবহার করার চেষ্টা করতে *ngForএবং *ngIfএকই উপাদানটিতে আমার সমস্যা হচ্ছে।

সংগ্রহটিতে লুপ করার চেষ্টা করার সময় *ngFor, সংগ্রহটি দেখা যায় nullএবং ফলস্বরূপ যখন টেম্পলেটে এর বৈশিষ্ট্যগুলি অ্যাক্সেস করার চেষ্টা করা হয় তখন ব্যর্থ হয়।

@Component({
  selector: 'shell',
  template: `
    <h3>Shell</h3><button (click)="toggle()">Toggle!</button>

    <div *ngIf="show" *ngFor="let thing of stuff">
      {{log(thing)}}
      <span>{{thing.name}}</span>
    </div>
  `
})

export class ShellComponent implements OnInit {

  public stuff:any[] = [];
  public show:boolean = false;

  constructor() {}

  ngOnInit() {
    this.stuff = [
      { name: 'abc', id: 1 },
      { name: 'huo', id: 2 },
      { name: 'bar', id: 3 },
      { name: 'foo', id: 4 },
      { name: 'thing', id: 5 },
      { name: 'other', id: 6 },
    ]
  }

  toggle() {
    this.show = !this.show;
  }

  log(thing) {
    console.log(thing);
  }

}

আমি জানি যে সহজ সমাধানটি *ngIfএকটি স্তরকে সরিয়ে নিয়ে যাওয়া তবে একটিতে তালিকার আইটেমগুলি লুপিংয়ের মতো দৃশ্যের জন্য ul, liযদি সংগ্রহটি খালি হয় তবে আমি আমার শূন্যস্থানটি শেষ করব না , বা আমার liএসকে আবদ্ধকারী ধারক উপাদানগুলিতে আবৃত করব ।

এই plnkr উদাহরণ ।

কনসোল ত্রুটি নোট করুন:

EXCEPTION: TypeError: Cannot read property 'name' of null in [{{thing.name}} in ShellComponent@5:12]

আমি কি কিছু ভুল করছি বা এটি একটি বাগ?

Comments

stackoverflow.com/questions/40529537/… আমি এনজি-ধারক নিয়ে যাব

— রবার্ট কিং

কৌণিক ফিল্টারযুক্ত টেবিলের

— কোবাস ক্রুগার

Answer 1

কৌণিক ভি 2 একই উপাদানটির জন্য একাধিক কাঠামোগত নির্দেশকে সমর্থন করে না।
কার্যক্ষম হিসাবে এমন <ng-container>উপাদানটি ব্যবহার করুন যা আপনাকে প্রতিটি কাঠামোগত নির্দেশের জন্য পৃথক উপাদান ব্যবহার করতে দেয়, তবে এটি ডিওএম-তে স্ট্যাম্প করা হয় না ।

<ng-container *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-container>

<ng-template>( <template>কৌণিক ভি 4 এর আগে) একই কাজ করতে দেয় তবে একটি ভিন্ন বাক্য গঠন যা বিভ্রান্তিকর এবং এর থেকে আর প্রস্তাব দেওয়া হয় না

<ng-template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</ng-template>

Comments

অনেক ধন্যবাদ. আশ্চর্যজনকভাবে এখনও নিবন্ধভুক্ত

— অ্যালেক্স

কোডটি দেখতে কেমন হবে যখন আমাদের * ngIf * এনজিফোর্ডের ভিতরে থাকতে হবে? অর্থাত্ যদি শর্তটি একটি লুপ উপাদানের মানের উপর ভিত্তি করে।

— যুবরাজ পাতিল

শুধু করা ngForএ <ng-container>উপাদান এবং ngIfএ <div>। আপনি দুটি নেস্টেড <ng-container>মোড়কেও রাখতে পারেন <div>। <ng-container>এটি কেবলমাত্র একটি সহায়ক উপাদান যা ডিওমে যুক্ত হবে না।

— গন্টার জ্যাচবাউর 12

আমি ব্যবহার করার পরামর্শ দিচ্ছি <ng-container>। এটি একইরকম আচরণ করে <template>তবে কাঠামোগত দিকনির্দেশনার জন্য "স্বাভাবিক" সিনট্যাক্স ব্যবহার করতে দেয়।

— গন্টার জ্যাচবাউয়ার

ডকুমেন্টেশন বলে : "প্রতি হোস্ট উপাদানটির জন্য একটি কাঠামোগত নির্দেশ": "এই ব্যবহারের ক্ষেত্রে একটি সহজ সমাধান রয়েছে: * এনজিআইএফটিকে একটি ধারক উপাদানটিতে রাখুন যা * এনজিফোর্ড উপাদানটি মোড় করে" " - কেবল পুনরাবৃত্তি করছেন

— হারিংগার

Answer 2

যেমনটি একক উপাদানে একাধিক টেমপ্লেট নির্দেশিকা থাকা কৌণিক 1.x তে কাজ করা সত্ত্বেও সকলেই চিহ্নিত করেছে যে এটি কৌণিক 2 তে অনুমোদিত নয় তবে আপনি এখান থেকে আরও তথ্য পেতে পারেন: https://github.com/angular/angular/issues/ 7315

2016 কৌনিক 2 বিটা

সমাধানটি <template>স্থানধারক হিসাবে ব্যবহার করা হয় , সুতরাং কোডটি এরকম হয়

<template *ngFor="let nav_link of defaultLinks"  >
   <li *ngIf="nav_link.visible">
       .....
   </li>
</template>

তবে উপরের কোনও কারণে সেক্ষেত্রে কাজ করে না 2.0.0-rc.4আপনি এটি ব্যবহার করতে পারেন

<template ngFor let-nav_link [ngForOf]="defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</template>

আপডেট উত্তর 2018

আপডেটগুলি সহ, 2018 এ এখনই কৌণিক ভি 6 এর <ng-container>পরিবর্তে ব্যবহার করার পরামর্শ দেয়<template>

সুতরাং এখানে আপডেট উত্তর।

<ng-container *ngFor="let nav_link of defaultLinks" >
   <li *ngIf="nav_link.visible">
       .....
   </li> 
</ng-container>

Answer 3

যেমন @ জাইজলে উল্লেখ করেছেন, এবং @ জন্টার একটি মন্তব্যে উল্লেখ করেছেন ( https://github.com/angular/angular/issues/7315 ), এটি সমর্থিত নয়।

সঙ্গে

<ul *ngIf="show">
  <li *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </li>
</ul>

<li>তালিকা খালি থাকলে কোনও খালি উপাদান নেই । এমনকি <ul>উপাদানটির অস্তিত্ব নেই (যেমন প্রত্যাশার সাথে)

তালিকাটি জনবহুল হয়ে গেলে, কোনও রিডান্ট্যান্ট ধারক উপাদান নেই।

GitHub আলোচনা (4792) যে @Zyzle তার মন্তব্যে উল্লেখ অন্য সমাধান উপস্থাপন ব্যবহার <template>(নীচে আমি আপনার মূল মার্কআপ ব্যবহার করছি - ব্যবহার <div>গুলি):

<template [ngIf]="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</template>

এই সমাধানটি কোনও অতিরিক্ত / অপ্রয়োজনীয় ধারক উপাদানও প্রবর্তন করে না।

Comments

আমি নিশ্চিত নই কেন এটি গৃহীত উত্তর নয়। <template>কোনও পিতামাতার উপাদান যুক্ত করার উপায় যা আউটপুটে প্রদর্শিত হবে না।

— ইভান প্লেস

Answer 4

এইচটিএমএলে:

<div [ngClass]="{'disabled-field': !show}" *ngFor="let thing of stuff">
    {{thing.name}}
</div>

সিএসএসে:

.disabled-field {
    pointer-events: none;
    display: none;
}

Answer 5

আপনি থাকতে পারে না ngForএবং ngIfএকই উপাদান। ngForআপনার উদাহরণটিতে টগল ক্লিক না করা অবধি আপনি যে অ্যারেটি ব্যবহার করছেন তা জনসাধারণকে বন্ধ করে দেওয়া আপনি কী করতে পারেন ।

এখানে এটি করার একটি প্রাথমিক (দুর্দান্ত নয়) উপায় রয়েছে: http://plnkr.co/edit/Pylx5HSWIZ7ahoC7wT6P

Comments

কেন সে দুটোই পারে না? অনুগ্রহ করে

— বিস্তারিত

এখানে চারদিকে আলোচনা আছে github.com/angular/angular/issues/4792

— জাইজলে

আমি জানি কেন এটি হচ্ছে, এটি কেবলমাত্র উত্তরের মান উন্নত করার জন্য, স্পষ্টতই বলা you can'tভাল উত্তর নয়, আপনি কি রাজি হন?

— মরিসেসি

অবশ্যই, এগুলি একসাথে ব্যবহার করা উচিত নয় কারণ এগুলি নির্দিষ্ট ক্রমে টেমপ্লেটে স্থাপন করা গ্যারান্টি দেয় না যে তারা একই ক্রমে কার্যকর করা হবে। তবে 'সম্পত্তি নালার নাম' নিক্ষেপ করা হলে ঠিক কী হয় তা এটি ব্যাখ্যা করে না।

— এস্তাস ফ্লাস্ক

উভয় * এনজিফোর্ড এবং * এনজিআইএফ (নক্ষত্র সহ) কাঠামোগত দিকনির্দেশনা এবং তারা <স্টেম্পলেট> ট্যাগ উত্পন্ন করে। কাঠামোগত দিকনির্দেশনা, এনজিআইএফ এর মতো এইচটিএমএল 5 টেম্পলেট ট্যাগ ব্যবহার করে তাদের যাদু করে।

— পারদীপ জৈন

Answer 6

আপনি Structural Directiveএকই উপাদানের উপর কৌণিকর একের বেশি ব্যবহার করতে পারবেন না , এটি একটি খারাপ বিভ্রান্তি এবং কাঠামো তৈরি করে, তাই আপনাকে এগুলিকে 2 পৃথক নেস্টেড উপাদানগুলিতে প্রয়োগ করতে হবে (বা আপনি ব্যবহার করতে পারেন ng-container), কৌণিক দলের এই বিবৃতিটি পড়ুন:

হোস্ট উপাদান অনুসারে একটি কাঠামোগত নির্দেশ

কোনও দিন আপনি এইচটিএমএল ব্লকের পুনরাবৃত্তি করতে চাইবেন তবে কেবল যখন কোনও নির্দিষ্ট শর্তটি সত্য হয়। আপনি একই হোস্ট উপাদানটিতে একটি * এনজিফোর্ড এবং একটি * এনজিআইফ উভয় রাখার চেষ্টা করবেন । কৌণিক আপনাকে দেয় না। আপনি কোনও উপাদানের জন্য কেবলমাত্র একটি কাঠামোগত নির্দেশ প্রয়োগ করতে পারেন।

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

এই প্রশ্নের কোনও সহজ উত্তর নেই। একাধিক কাঠামোগত দিকনির্দেশনা নিষিদ্ধ করা তাদের গতিময় করে তোলে। এই ব্যবহারের ক্ষেত্রে একটি সহজ সমাধান রয়েছে: * এনজিআইএফটিকে একটি ধারক উপাদানটিতে রাখুন যা * এনজিফোর্ড উপাদানটি মোড় করে । এক বা উভয় উপাদানই এনজি-ধারক হতে পারে তাই আপনাকে এইচটিএমএল অতিরিক্ত স্তরের প্রবর্তন করতে হবে না।

সুতরাং আপনি ng-container(অ্যাঙ্গুলার 4) মোড়ক হিসাবে ব্যবহার করতে পারেন (ডোম থেকে মুছে ফেলা হবে) বা একটি ডিভ বা স্প্যান যদি আপনার ক্লাস বা অন্যান্য কিছু বৈশিষ্ট্য নীচের মতো থাকে:

<div class="right" *ngIf="show">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

Answer 7

এটি কাজ করবে তবে উপাদানটি ডিওমে থাকবে।

.hidden {
    display: none;
}

---

<div [class.hidden]="!show" *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
</div>

Comments

<সিলেক্ট << বিভাগ> সংমিশ্রনের জন্য এটি একটি খুব সহজ হ্যাক, যা আমি কেবল সম্পূর্ণ তালিকার পরিবর্তে ফিল্টারযুক্ত আইটেমগুলি দেখাতে চাই

— ডেভিজ্যাং

আপনাকে অনেক ধন্যবাদ!

— অভিষেক শর্মা

Answer 8

নীচের সারণীতে কেবলমাত্র "প্রাথমিক" মান সেট করা আইটেমের তালিকা রয়েছে। এইচটিএমএলে অবাঞ্ছিত সারিগুলি রোধ করতে উভয় *ngForএবং এর দুটির প্রয়োজন *ngIf।

মূলত একই টেস্টে ছিল *ngIfএবং কাজ করে না। একটি যোগ করা হয়েছে জন্য লুপ এবং স্থাপন মধ্যে ট্যাগ, যেমন প্রত্যাশিত কাজ করে।*ngFor<tr><div>*ngFor*ngIf<tr>

<table class="table lessons-list card card-strong ">
  <tbody>
  <div *ngFor="let lesson of lessons" >
   <tr *ngIf="lesson.isBeginner">
    <!-- next line doesn't work -->
    <!-- <tr *ngFor="let lesson of lessons" *ngIf="lesson.isBeginner"> -->
    <td class="lesson-title">{{lesson.description}}</td>
    <td class="duration">
      <i class="fa fa-clock-o"></i>
      <span>{{lesson.duration}}</span>
    </td>
   </tr>
  </div>
  </tbody>

</table>

Comments

আমি মনে করি না যে কোনও <div>টেবিলের অভ্যন্তরটি একটি গুজ ধারণা, বিশেষত যখন আরও ভাল বিকল্প থাকে। আপনি যদি পরীক্ষা করে <table>

— দেখেছেন

Answer 9

কৌণিক 2 বিটা 8 এ আপডেট হয়েছে

এখন কৌণিক 2 বিটা 8 হিসাবে আমরা ব্যবহার করতে পারি *ngIfএবং *ngForএকই উপাদানটিতে এখানে দেখুন ।

বিকল্প:

কখনও কখনও আমরা অন্যগুলির মতো tr, th( table) বা ইন li( ul) এর মধ্যে এইচটিএমএল ট্যাগগুলি ব্যবহার করতে পারি না । আমরা অন্য কোনও এইচটিএমএল ট্যাগ ব্যবহার করতে পারি না তবে আমাদের একই পরিস্থিতিতে কিছু ক্রিয়া করতে হবে যাতে আমরা <template>এই ভাবে HTML5 বৈশিষ্ট্য ট্যাগ করতে পারি ।

টেমপ্লেট ব্যবহারের জন্য এনজিও:

<template ngFor #abc [ngForOf]="someArray">
    code here....
</template>

টেমপ্লেট ব্যবহার করে এনজিআই:

<template [ngIf]="show">
    code here....
</template>    

কৌনিক 2 এ কাঠামোগত নির্দেশাবলী সম্পর্কে আরও তথ্যের জন্য এখানে দেখুন ।

Answer 10

<div *ngFor="let thing of show ? stuff : []">
  {{log(thing)}}
  <span>{{thing.name}}</span>
</div>

Answer 11

এছাড়াও আপনি ব্যবহার করতে পারেন ng-template(টেমপ্লেট পরিবর্তে। টেমপ্লেট ট্যাগ ব্যবহারের জন্য সতর্কীকরণ জন্য নোট দেখুন) উভয় আবেদন করার জন্য * ngFor এবং ngIf একই HTML উপাদান উপর। এখানে একটি উদাহরণ রয়েছে যেখানে আপনি কৌণিক সারণীতে একই টিআর উপাদানটির জন্য * ngIf এবং * ngfor উভয়ই ব্যবহার করতে পারেন ।

<tr *ngFor = "let fruit of fruiArray">
    <ng-template [ngIf] = "fruit=='apple'>
        <td> I love apples!</td>
    </ng-template>
</tr>

যেখানে fruiArray = ['apple', 'banana', 'mango', 'pineapple']।

বিঃদ্রঃ:

templateট্যাগের পরিবর্তে কেবল ট্যাগটি ব্যবহারের সতর্কতাটি ng-templateহ'ল এটি StaticInjectionErrorকোনও কোনও স্থানে ছুড়ে ফেলে ।

Answer 12

<!-- Since angular2 stable release multiple directives are not supported on a single element(from the docs) still you can use it like below -->


<ul class="list-group">
                <template ngFor let-item [ngForOf]="stuff" [ngForTrackBy]="trackBy_stuff">
                    <li *ngIf="item.name" class="list-group-item">{{item.name}}</li>
                </template>
   </ul>

Comments

লি আইটেমগুলির কেবলমাত্র নাম প্রদর্শিত হলে প্রদর্শিত হয়।

— রাজীব

এই উত্তরটি এখানে কীভাবে মূল্য যুক্ত করে? এটি ইতিমধ্যে অন্যান্য উত্তর সরবরাহ করে না এমন কিছু সরবরাহ করে না বা আমি কিছু মিস করেছি?

— গন্টার জ্যাচবাউর

Answer 13

আপনি একই উপাদানটিতে একাধিক কাঠামোগত নির্দেশ ব্যবহার করতে পারবেন না। আপনার উপাদানটি মোড়ানো ng-templateএবং সেখানে একটি কাঠামোগত নির্দেশ ব্যবহার করুন

Answer 14

অ্যারের দৈর্ঘ্য পরীক্ষা করে আপনি এটি অন্য কোনও উপায়ে করতে পারেন

<div *ngIf="stuff.length>0">
  <div *ngFor="let thing of stuff">
    {{log(thing)}}
    <span>{{thing.name}}</span>
  </div>
</div>

Answer 15

app.component.ts

import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'ngif-example',
  template: `
<h4>NgIf</h4>
<ul *ngFor="let person of people">
  <li *ngIf="person.age < 30"> (1)
  {{ person.name }} ({{ person.age }})
  </li>
</ul>
`
})
class NgIfExampleComponent {

  people: any[] = [
    {
      "name": "yogesh ",
      "age": 35
    },
    {
      "name": "gamesh",
      "age": 32
    },
    {
      "name": " Meyers",
      "age": 21
    },
    {
      "name": " Ellis",
      "age": 34
    },
    {
      "name": " Tyson",
      "age": 32
    }
  ];
}

app.component.html

<ul *ngFor="let person of people" *ngIf="person.age < 30">
  <li>{{ person.name }}</li>
</ul>

আউটপুট

Meyers(21)