আর কীভাবে * এনজিআই ব্যবহার করবেন?

Question

আমি কৌণিক ব্যবহার করছি এবং আমি *ngIf elseএই উদাহরণে (সংস্করণ 4 পরে উপলব্ধ) ব্যবহার করতে চাই :

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

আমি কীভাবে একই আচরণটি বর্ধন করতে পারি ngIf else?

Comments

কৌনিক 8 এর জন্য এখানে এনজিফ, এনজিআইএফ অন্য এবং এনজিআইএফ উদাহরণ দিয়ে ব্যাখ্যা করুন তবে অন্যথায় ফ্রেইকিজলি.com/…

— কোড স্পাই

Answer 1

কৌনিক 4 এবং 5 :

ব্যবহার else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

আপনি এটি ব্যবহার করতে পারেন then else:

<div *ngIf="isValid;then content else other_content">here is ignored</div>    
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

বা thenএকা:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

ডেমো:

Plunker

বিবরণ:

<ng-template>: এমডিএন<template> অনুসারে ট্যাগটি কৌনিকের নিজস্ব বাস্তবায়ন :

এইচটিএমএল <template>উপাদান হ'ল ক্লায়েন্ট-সাইড সামগ্রী সংরক্ষণের জন্য একটি প্রক্রিয়া যা কোনও পৃষ্ঠা লোড হওয়ার সময় রেন্ডার করা উচিত নয় তবে পরবর্তীকালে জাভাস্ক্রিপ্ট ব্যবহার করে রানটাইম চলাকালীন তা ইনস্ট্যান্ট করা যেতে পারে।

Comments

আমি আশা করলাম যে ডিভের মতো অন্য ট্যাগ ছাড়া <ng-template> ব্যবহার করার কোনও উপায় ছিল তবে অদ্ভুতভাবে তা হয় না ... আমি জানি যে আপনি ব্যবহার করার সাথে সাথে <ডিভি> কে মুছে ফেলা হবে, তবে এটি বাস্তবায়নের মতোই অদ্ভুত।

— Andreas

@ Andreas আপনি যদি এই ক্লফটির <ng-container>জন্য ব্যবহার করতে পারেন

— মার্টিন শ্নাইডার

দ্রষ্টব্য: আপনি ng-container* এনজিআইফ থাকা ধারকটির জন্য ব্যবহার করতে পারেন , তবে টেমপ্লেটের জন্য নয়

— সাইমন_উইভার

@ সিমন_আমি যেহেতু খুব শক্তভাবে এটি আবিষ্কার করেছি। কিন্তু কেন? কেন তারা *ngIf কাজ করতে দেয়নি ng-template?

— ইরান মেডান

<div * ngIf = "is in theवात; তারপরে অন্য বিষয়বস্তু অন্য_কন্টেন্ট"> এড়ানো হবে </ div> এটিকে অগ্রাহ্য করা হবে না। এটি স্থান

— ফট

Answer 2

কৌণিক 4.xx এ আপনি অন্য পদ্ধতিতে সহজ অর্জনের জন্য চারটি উপায়ে এনজিআইফ ব্যবহার করতে পারেন :

1. শুধু ব্যবহারের তাহলে

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. অন্যের সাথে থাকলে ব্যবহার করুন ( টেম্পলেটনামে দয়া করে লক্ষ্য করুন )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. ব্যবহার দিয়ে তারপর যদি (দয়া করে বিজ্ঞপ্তি TEMPLATENAME )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. ইফ উইথ থুথ এবং অন্যথায় ব্যবহার করা

   <div *ngIf="isValid; then thenTemplateName else elseTemplateName">
       Here is never showing
   </div>
   
   <ng-template #thenTemplateName>
       If isValid is true
   </ng-template>
   
   <ng-template #elseTemplateName>
       If isValid is false
   </ng-template>
   

টিপ: এনজিআইফ এক্সপ্রেশনটি মূল্যায়ন করে এবং তারপরে যথাক্রমে সত্যবাদী বা মিথ্যা বললে তার স্থানে তখন বা অন্য কোনও টেম্পলেট সরবরাহ করে। সাধারণত:

• তারপরে টেমপ্লেটটি হ'ল এনজিআইএফ- এর ইনলাইন টেমপ্লেট, যদি না ভিন্ন মানের সাথে আবদ্ধ থাকে।
• অন্যথায় টেমপ্লেট ফাঁকা থাকে যদি না এটি আবদ্ধ থাকে।

Comments

দেখে মনে হচ্ছে সংকলক গ্রহণ করে না ...; else ...। সম্ভবত ;অপসারণ করা উচিত।

— স্লারতিদান

কৌনিক -6 এ, আমি ...; else ...এটি দিয়ে পরীক্ষা করেছি এবং এটি কাজ করেছে

— ওয়াসিএফ

Answer 3

পর্যবেক্ষণযোগ্য সাথে কাজ করার জন্য, পর্যবেক্ষণযোগ্য অ্যারেতে ডেটা থাকে তবে আমি সাধারণত এটি প্রদর্শন করি।

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>

Answer 4

"bindEmail" এটি ইমেল উপলব্ধ কিনা তা যাচাই করবে। লগআউটের চেয়ে ইমেল উপস্থিত থাকলে অন্যথায় লগইন প্রদর্শিত হবে

<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>

Comments

এটি কাজ করে না। যদি এটি সঠিক হয়, তবে এটি এখনও কোনও মান যুক্ত করবে না কারণ গৃহীত উত্তরগুলি ইতিমধ্যে এটি কীভাবে করবেন তা দেখায়।

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

Answer 5

আপনি ব্যবহার করতে পারেন <ng-container>এবং <ng-template>এই অর্জন জন্য

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>
     <div>Template 1 contains</div>
</ng-template>

<ng-template #template2>
     <div>Template 2 contains </div>
</ng-template>

আপনি নীচে স্ট্যাকব্লিটজ লাইভ ডেমোটি পেতে পারেন

সরাসরি নমুনা

আশা করি এটি সাহায্য করবে ... !!!

Answer 6

জন্য কৌণিক 9/8

উদাহরণ সহ উত্স লিঙ্ক

    export class AppComponent {
      isDone = true;
    }

1) * এনজিআইএফ

    <div *ngIf="isDone">
      It's Done!
    </div>

    <!-- Negation operator-->
    <div *ngIf="!isDone">
      It's Not Done!
    </div>

2) * এনজিআইএফ এবং অন্যথায়

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * এনজিআইফ, তারপরে এবং অন্যথায়

    <ng-container *ngIf="isDone;  then iAmDone; else iAmNotDone">
    </ng-container>

    <ng-template #iAmDone>
      It's Done!
    </ng-template>

    <ng-template #iAmNotDone>
      It's Not Done!
    </ng-template>

Comments

এটি কেবল স্বীকৃত উত্তরটি ইতিমধ্যে যা বলেছিল তার পুনরাবৃত্তি করে

— phil294

Answer 7

এনজিআইএফ / অন্যের জন্য সিনট্যাক্স

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

এনজিআইএফ / অন্য / পরে সুস্পষ্ট বাক্য গঠন ব্যবহার করে

তারপরে টেমপ্লেট যুক্ত করতে আমাদের কেবল এটি স্পষ্টভাবে কোনও টেম্পলেটের সাথে আবদ্ধ করতে হবে।

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

এনজিআইএফ এবং অ্যাসিঙ্ক পাইপ সহ পর্যবেক্ষণযোগ্য

বিস্তারিত জানার জন্য

Answer 8

শুধু কৌনিক 8 থেকে নতুন আপডেট যুক্ত করুন।

1. যদি অন্য কারও সাথে থাকে তবে আমরা এনজিআইএফ এবং এনজিআইএফএলস ব্যবহার করতে পারি ।

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

2. যদি এর সাথে থাকে তবে আমরা এনজিআইএফ এবং এনজিআইফেন ব্যবহার করতে পারি ।

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>

3. যদি সেই ক্ষেত্রে এবং অন্য কোনও ক্ষেত্রে, আমরা ngIf , ngIfThen , এবং ngIfElse ব্যবহার করতে পারি ।

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

Comments

গ্রেট! আমরা সম্প্রতি কৌনিক 8

— ইসলাম মুর্তজায়েভ

Answer 9

অ্যাঙ্গুলার 4.0.০ তে if..elseসিনট্যাক্স জাভাতে শর্তসাপেক্ষ অপারেটরগুলির সাথে বেশ মিল।

জাভাতে আপনি ব্যবহার করুন "condition?stmnt1:stmnt2"।

Angular 4.0 এ আপনি ব্যবহার করেন *ngIf="condition;then stmnt1 else stmnt2"।

Comments

অভিব্যক্তি যখন ওরাকল কেসের মতো দেখায় .. :-)

— পিটার

আপনি টার্নারি অপারেটরটির কথা উল্লেখ করছেন যা বেশিরভাগ সি-ভিত্তিক ভাষায় বিদ্যমান তবে এটি কোটলিনের কাছাকাছি যদি প্রকাশ হয় ।

— পুরাণ

Answer 10

এনজিএফ এক্সপ্রেশন ফলাফল মান কেবল বুলিয়ান সত্য বা মিথ্যা হবে না

যদি অভিব্যক্তিটি কেবল একটি অবজেক্ট হয় তবে এটি এটিকে সত্যতা হিসাবে মূল্যায়ন করে।

যদি অবজেক্টটি অপরিজ্ঞাত হয় বা অস্তিত্বহীন থাকে তবে এনজিআইফ এটিকে মিথ্যা হিসাবে মূল্যায়ন করবে।

সাধারণ ব্যবহার হ'ল যদি কোনও বস্তু লোড হয়, বিদ্যমান থাকে তবে এই বস্তুর সামগ্রীটি প্রদর্শন করুন, অন্যথায় "লোডিং ......." প্রদর্শন করুন।

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

আরেকটি উদাহরণ:

  things = {
 car: 'Honda',
 shoes: 'Nike',
 shirt: 'Tom Ford',
 watch: 'Timex'
 };

 <div *ngIf="things.car; else noCar">
  Nice car!
 </div>

<ng-template #noCar>
   Call a Uber.
</ng-template>

 <!-- Nice car ! -->

বিরূপ উদাহরণ:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

এনজিএফ টেম্পলেট

এনজিএফ কৌণিক 4

Answer 11

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>

Answer 12

এইচটিএমএল ট্যাগ বা টেম্পলেটগুলিতে শর্ত থাকলে ব্যবহারের দুটি সম্ভাবনা রয়েছে:

1. * এনজিআইএফএমএল ট্যাগে কমনমডুল থেকে নির্দেশ;
2. অন্যথায় যদি

Answer 13

<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font">    </div>

<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>

Answer 14

কৌনিক 4, 5 এবং 6 এ

আমরা কেবলমাত্র একটি টেম্পলেট রেফারেন্স ভেরিয়েবল তৈরি করতে পারি ^[2] এবং এটি একটি * ng নির্দেশের মধ্যে অন্য অবস্থার সাথে লিঙ্ক করতে পারি

সম্ভাব্য সিনট্যাক্স ^[1] হ'ল :

<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>


<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>

<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>


<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>

ডেমো: https://stackblitz.com/edit/angular-feumnt?e એમ્બેડ=1&file=src/app/ app.component.html

সূত্র:

1. https://angular.io/api/common/NgIf#syntax
2. https://angular.io/guide/template-syntax#template-reference-variables--var-

Answer 15

আপনি জাভাস্ক্রিপ্ট শর্ট টার্নারি কন্ডিশনাল অপারেটরও ব্যবহার করতে পারেন? এই মত কৌণিক:

{{doThis() ? 'foo' : 'bar'}}

অথবা

<div [ngClass]="doThis() ? 'foo' : 'bar'">

Answer 16

আমি জানি এটি কিছুক্ষণ হয়েছে, তবে এটি যদি সহায়তা করে তবে এটি যুক্ত করতে চাই। আমি যেভাবে যাচ্ছিলাম তা হ'ল উপাদানটিতে দুটি পতাকা এবং সংশ্লিষ্ট দুটি পতাকাগুলির জন্য দুটি এনজিআইএফ।

এটি সহজ ছিল এবং এনজি-টেম্পলেট এবং উপাদানগুলি একসাথে ভালভাবে কাজ করছে না বলে উপাদানগুলির সাথে ভালভাবে কাজ করেছে।