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




if-statement angular-template (10)

কৌনিক 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?embed=1&file=src/app/app.component.html એમ્બેડ=1&file=src/app/ https://stackblitz.com/edit/angular-feumnt?embed=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-

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

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

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

ngIf else সাথে আমি কীভাবে একই আচরণ করতে ngIf else ?


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

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

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

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


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

জাভাতে আপনি "condition?stmnt1:stmnt2"

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


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

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

অথবা

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

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

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


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

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

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

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

 <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


ng-template

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

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

  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. তার সাথে থাকলে ব্যবহার করুন (দয়া করে টেম্পলেটনামে লক্ষ্য করুন)

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

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

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

কৌনিক 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> : MDN অনুসারে MDN <template> ট্যাগটির নিজস্ব প্রয়োগকরণ:

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


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




angular-template