* এনজিআই যদি অন্য কোনও টেমপ্লেটে থাকে

Question

আমি কীভাবে একটি *ngIfবিবৃতিতে একাধিক মামলা করব ? আমি একজন থাকার সঙ্গে Vue বা কৌণিক 1 অভ্যস্ত if, else ifএবং else, কিন্তু এটা কৌণিক 4 মত মনে হয় শুধুমাত্র একটি হয়েছে true( if) এবং false( else) অবস্থায়।

ডকুমেন্টেশন অনুসারে, আমি কেবল এটিই করতে পারি:

  <ng-container *ngIf="foo === 1; then first else second"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

তবে আমি একাধিক শর্ত থাকতে চাই (যেমন কিছু):

  <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

তবে আমি ব্যবহার শেষ করছি ngSwitch, যা হ্যাকের মতো মনে হচ্ছে:

  <ng-container [ngSwitch]="true">
    <div *ngSwitchCase="foo === 1">First</div>
    <div *ngSwitchCase="bar === 2">Second</div>
    <div *ngSwitchDefault>Third</div>
  </ng-container>

পর্যায়ক্রমে, এঙ্গুলার 1 এবং ভ্যুটি কৌনিক 4 তে সমর্থিত নয় এমন অনেকগুলি সিনট্যাক্সের মতো বলে মনে হচ্ছে, তাহলে এই জাতীয় শর্তগুলির সাথে আমার কোডটি গঠনের প্রস্তাবিত উপায় কী হবে?

Comments

আমি ভাবছিলাম যে আপনি হ্যাক হলেন সেরা সমাধান কারণ এটি সর্বাধিক পঠনযোগ্য। তবে আমি বুঝতে পেরেছি যে কৌণিক সুইচ স্টেটমেন্টগুলি একাধিক মানদণ্ড মেলানোর অনুমতি দেয় যাতে আপনি সেই সত্য অন্যটি যুক্তিটি না পান।

— টম বেনিয়ন

Answer 1

আরেকটি বিকল্প হ'ল বাসা শর্ত

<ng-container *ngIf="foo === 1;else second"></ng-container>
<ng-template #second>
    <ng-container *ngIf="foo === 2;else third"></ng-container>
</ng-template>
<ng-template #third></ng-template>

Comments

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

— ম্যাট ডেকোক

আমরা যেমন ব্যবহার করতে পারি না<ng-template #second *ngIf="foo === 2;else third">

— লোকি

চতুর

— টিবিএইচ

Answer 2

আপনি কেবল ব্যবহার করতে পারেন:

<ng-template [ngIf]="index == 1">First</ng-template>
<ng-template [ngIf]="index == 2">Second</ng-template>
<ng-template [ngIf]="index == 3">Third</ng-template>

আমি মনে করি আপনার ডিজাইনের জন্য এনজি-কন্টেইনার অংশটি গুরুত্বপূর্ণ না হলে।

এখানে একজন প্লাঙ্কার

Comments

আমার উদাহরণটি কিছুটা সরলতর, তবে 'অন্যথায়' এমন আচরণের প্রত্যাশা if (index === 1) else if (foo === 2)যা লিখতে হবে if (index === 1) if (index !== 1 && foo === 2)যা কিছুটা অগোছালো এবং ত্রুটির ঝুঁকির ঝুঁকির মধ্যে রয়েছে, ততবার আমাদের বিপরীত যুক্তি লিখতে হবে।

তুমি কি নিমজ্জনকারীকে দেখেছ? আমি মনে করি না যে আমি সমস্যাটি দেখছি, সূচী একবারে 1 টি জিনিস হতে চলেছে।

— ডিলান

আমি মনে করি এটি আমার উদাহরণ যার ব্যাখ্যাটির অভাব রয়েছে, এখানে জেএস-এর একটি উদাহরণ রয়েছে: if (item === 'food' && kind === 'hamburger') {} else if (item === 'food' && kind === 'hotdog') {} else if (item === 'drink' && kind === 'beer') {} else if (item === 'drink' && kind === 'wine') {} else { /* could be poisonous */ }

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

আরও কয়েকটি অপশন রয়েছে, আপনার মনে হচ্ছে আপনি NgTemplateOutlet* ngTemplateOutlet = "পানীয়; প্রসঙ্গ: বিয়ার", বা শ্রেণিবদ্ধকরণের জন্য অন্য কোনও উপাদান যেমন প্রসঙ্গ সহ একটি উপকার পেতে পারেন ।

— ডিলান

Answer 3

এটি করার সবচেয়ে পরিষ্কার উপায় বলে মনে হচ্ছে

if (foo === 1) {

} else if (bar === 99) {

} else if (foo === 2) {

} else {

}

টেমপ্লেটে:

<ng-container *ngIf="foo === 1; else elseif1">foo === 1</ng-container>
<ng-template #elseif1>
    <ng-container *ngIf="bar === 99; else elseif2">bar === 99</ng-container>
</ng-template>
<ng-template #elseif2>
    <ng-container *ngIf="foo === 2; else else1">foo === 2</ng-container>
</ng-template>
<ng-template #else1>else</ng-template>

লক্ষ্য করুন যে এটি একটি সঠিক else ifবিবৃতি হিসাবে কাজ করবে যখন শর্তাবলী বিভিন্ন ভেরিয়েবল জড়িত (একবারে শুধুমাত্র 1 টি ক্ষেত্রে সত্য)। অন্যান্য উত্তরগুলির মধ্যে কিছু এই ক্ষেত্রে সঠিকভাবে কাজ করে না।

একপাশে: গোশ কৌণিক, এটি কিছু সত্যই কুৎসিত else ifটেম্পলেট কোড ...

Answer 4

সিটোশন ভিত্তিক আপনি একাধিক উপায় ব্যবহার করতে পারেন:

1. আপনি যদি চলক নির্দিষ্ট সীমাবদ্ধ নম্বর বা স্ট্রিং , সবচেয়ে ভালো উপায় ngSwitch বা ngIf ব্যবহার করছে:

   <!-- foo = 3 -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="1">First Number</div>
       <div *ngSwitchCase="2">Second Number</div>
       <div *ngSwitchCase="3">Third Number</div>
       <div *ngSwitchDefault>Other Number</div>
   </div>
   
   <!-- foo = 3 -->
   <ng-template [ngIf]="foo === 1">First Number</ng-template>
   <ng-template [ngIf]="foo === 2">Second Number</ng-template>
   <ng-template [ngIf]="foo === 3">Third Number</ng-template>
   
   
   <!-- foo = 'David' -->
   <div [ngSwitch]="foo">
       <div *ngSwitchCase="'Daniel'">Daniel String</div>
       <div *ngSwitchCase="'David'">David String</div>
       <div *ngSwitchCase="'Alex'">Alex String</div>
       <div *ngSwitchDefault>Other String</div>
   </div>
   
   <!-- foo = 'David' -->
   <ng-template [ngIf]="foo === 'Alex'">Alex String</ng-template>
   <ng-template [ngIf]="foo === 'David'">David String</ng-template>
   <ng-template [ngIf]="foo === 'Daniel'">Daniel String</ng-template>
   

2. অন্য কোডগুলি এবং গতিশীল কোডগুলি যদি এর জন্য উপযুক্ত না হয় তবে আপনি নীচের কোডটি ব্যবহার করতে পারেন:

   <!-- foo = 5 -->
   <ng-container *ngIf="foo >= 1 && foo <= 3; then t13"></ng-container>
   <ng-container *ngIf="foo >= 4 && foo <= 6; then t46"></ng-container>
   <ng-container *ngIf="foo >= 7; then t7"></ng-container>
   
   <!-- If Statement -->
   <ng-template #t13>
       Template for foo between 1 and 3
   </ng-template>
   <!-- If Else Statement -->
   <ng-template #t46>
       Template for foo between 4 and 6
   </ng-template>
   <!-- Else Statement -->
   <ng-template #t7>
       Template for foo greater than 7
   </ng-template>
   

দ্রষ্টব্য: আপনি যে কোনও বিন্যাস চয়ন করতে পারেন তবে লক্ষ্য করুন যে প্রতিটি কোডের নিজস্ব সমস্যা রয়েছে

Comments

আইএমও ২ এর *ngIf="foo >= 7; then t7"পরিবর্তে পড়া উচিত ... else t7।

— hgoebl

আমি মনে করি দ্বিতীয়টির সাথে দুটি লাইনের foo >= 4 && foo <= 6; then t46; else t7কাজ করা উচিত।

— মেঘ

Answer 5

বাসা বাঁধতে এবং এনজিউইচ এড়ানোর জন্য, এই সম্ভাবনাও রয়েছে, যা জাভাস্ক্রিপ্টে লজিকাল অপারেটররা যেভাবে কাজ করে তার সুফল দেয়:

<ng-container *ngIf="foo === 1; then first; else (foo === 2 && second) || (foo === 3 && third)"></ng-container>
  <ng-template #first>First</ng-template>
  <ng-template #second>Second</ng-template>
  <ng-template #third>Third</ng-template>

Answer 6

অথবা টেরিনারি অপারেটরের সাথে কেবল শর্তযুক্ত শিকল ব্যবহার করুন use if … else if … else if … elseচেইন

https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / অপারেটর / কনডিশনাল_অপারেটর# কন্ডিশনাল_চেইনস

<ng-container *ngIf="isFirst ? first: isSecond ? second : third"></ng-container>

<ng-template #first></ng-template>
<ng-template #second></ng-template>
<ng-template #third></ng-template>

আমি এই অপ্রোচ ভাল।

Answer 7

<ion-row *ngIf="cat === 1;else second"></ion-row>
<ng-template #second>
    <ion-row *ngIf="cat === 2;else third"></ion-row>
</ng-template>
<ng-template #third>

</ng-template>

কৌণিক ইতিমধ্যে আমরা সমস্ত সময় ব্যবহার করি এমন স্ট্রাকচারাল দিকনির্দেশনায় হুডের নীচে এনজি-টেম্পলেট ব্যবহার করে চলেছি: এনজিআইএফ, এনজিফোর্ড এবং এনজিএসউইচ।

> কৌণিক এনজি টেম্পলেট কি

https://www.angularjswiki.com/angular/ কি-is-ng-template-in-angular/

Answer 8

জটিলটিকে রূপান্তর করার জন্য আপনি যদি এই পুরানো কৌশলটি ব্যবহার করতে পারেন তবে / তারপরে / অন্য কোনও ব্লককে কিছুটা ক্লিনার সুইচ স্টেটমেন্টে পরিণত করুন:

<div [ngSwitch]="true">
    <button (click)="foo=(++foo%3)+1">Switch!</button>

    <div *ngSwitchCase="foo === 1">one</div>
    <div *ngSwitchCase="foo === 2">two</div>
    <div *ngSwitchCase="foo === 3">three</div>
</div>