কৌণিক দুটি সুইচ কেস মান

Question 1

পিএইচপি এবং জাভাতে আমরা করতে পারি

case 1:
case 2:
   echo "something";

যাতে মান 1 বা 2 হয় "কিছু" স্ক্রিনে মুদ্রিত হবে, আমি একটি কৌনিক অ্যাপ্লিকেশন তৈরি করছি আমি নীচের মতো কিছু করছি

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice'">FORM 1</div>
  <div *ngSwitchCase="'singe-choice'">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

একক পছন্দের জন্য যে ফর্মটি ব্যবহৃত হয় তা একাধিক পছন্দের জন্য ব্যবহার করা যেতে পারে, তবে নীচের মতো কিছু চেষ্টা করে এটি আরও সুসংগঠিত করে তুলতে

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="'multi-choice' || 'singe-choice'">FORM 1</div>
</div>

আমার দুর্ভাগ্য এটি কাজ করে নি, কেউ কি এটির জন্য আরও ভাল উপায়ের পরামর্শ দিতে পারে।

Question 2

(আন) ভাগ্যক্রমে আপনি পারবেন না; ngSwitchবেশ "বোবা" হয় আপনি সোর্স কোড তাকান: এটি শুধু একটি ব্যাপার ===ক্ষেত্রে মান এবং সুইচ মানের মধ্যে। আপনার কাছে দুটি বিকল্প রয়েছে তবে উভয়ই দুর্দান্ত from

বিকল্প 1 নির্দেশনাটি ব্যবহার করছে *ngSwitchDefault, তবে এটি কেবল তখনই কাজ করবে যদি আপনার সমস্ত একাধিক কেস ফর্ম 1:

<div [ngSwitch]="data.type">
  <div *ngSwitchDefault>FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

অন্য বিকল্পটি, যা বেশ ভার্বোস, এটি এমন কিছু করছে:

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="data.type === 'multi-choice' || data.type === 'singe-choice' ? data.type : '' ">FORM 1</div>
  <div *ngSwitchCase="'range'">FORM 2</div>
</div>

Question 3

আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন যা অনেক বেশি নমনীয়। তারপরে আপনি বুলিয়ান যা মূল্যায়ন করে তা * ngSwitchCase মান হিসাবে রাখতে পারেন।

<div [ngSwitch]="true">
    <div *ngSwitchCase="data.type === 'multi-choice' || data.type === 'singe-choice'">FORM 1</div>
    <div *ngSwitchCase="data.type === 'range'">FORM 2</div>
    <div *ngSwitchDefault>FORM 3</div>
</div>

* এনজিআইএফ ব্লক ব্যবহার করে এটির যে সুবিধাটি রয়েছে তা হ'ল আপনি এখনও একটি ডিফল্ট নির্দিষ্ট করতে পারেন।

Question 4

আপনি এটি ngTemplateOutletপ্রয়োগ করতে ব্যবহার করতে পারেন :

<ng-container [ngSwitch]="variable">
    <ng-container *ngSwitchCase="1">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="2">
        <ng-container *ngTemplateOutlet="form1"></ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
    <ng-template #form1>FORM 1</ng-template>
</ng-container>

হালনাগাদ

অ্যাঙ্গুলার এখনও এই জাতীয় বৈশিষ্ট্য বিবেচনা করার সময় , সেখানে জুনিয়রমারের স্যুইচ-কেস.ডায়ারেক্টিভ.টি রয়েছে । ব্যবহারের উদাহরণ:

<ng-container [ngSwitch]="variable">
    <ng-container *jrSwitchCases="[1, 2]">FORM 1</ng-container>
    <ng-container *ngSwitchCase="3">FORM 2</ng-container>
    <ng-container *ngSwitchDefault>FORM 3</ng-container>
</ng-container>

Question 5

এখানে একটি ভিন্নতা যা ফ্যাবিওর দ্বিতীয় উত্তরটিকে ব্রায়ান 3 কেবি'র সাথে একত্রিত করে অর্থ ছাড়াই আরও ঘনীভূত সমাধান উত্পাদন করতে পারে।

যদি কোনও মামলার একাধিক মিল থাকে তবে এটি array.includes()প্রতিটি বিকল্পের স্বতন্ত্রভাবে তুলনা করার পরিবর্তে ব্যবহার করে।

এটি বিশেষত কার্যকর যদি দুটিরও বেশি ম্যাচ থাকে তবে এটি গৃহীত উত্তরের তুলনায় অনেক বেশি ঘনীভূত হবে।

<div [ngSwitch]="data.type">
   <div *ngSwitchCase="['multi-choice', 'singe-choice'].includes(data.type) ? data.type : ''">FORM 1</div>
   <div *ngSwitchCase="'range'">FORM 2</div>
   <div *ngSwitchDefault>FORM 3</div>
</div>

ম্যাচগুলি যদি কোনও ভেরিয়েবলের array.indexOf()হয়ে থাকে তবে আপনি শর্তসাপেক্ষ টের্নারি অপারেটরের ব্যবহার এড়াতে ব্যবহার করতে পারেন ।

<div [ngSwitch]="data.type">
  <div *ngSwitchCase="matches[matches.indexOf(data.type)]">FORM 1</div>
  <!-- ... -->
</div>

Question 6

ভালো লেগেছে MoshMage প্রস্তাব, আমি একটি ব্যবহার শেষ পর্যন্ত *ngIfযে সমস্ত উপাদান অপশনের বিভিন্ন ঘাঁটা এই হ্যান্ডেল করতে:

 *ngIf="['Transformation', 'Field Mapping', 'Filter'].includes(selectedWorkflow.type)"

Question 7

চেষ্টা করুন ng-switch-when-separator="|"মধ্যেng-switch

<div ng-switch="temp">
    <div ng-switch-when="1|2" ng-switch-when-separator="|"> echo "something"</div>
</div>

Question 8

আমি এখানে এটি কীভাবে করব:

আপনার .component.ts:

getFormType(type: string) {
  switch(type) {
    case 'singe-choice':
    case 'multi-choice':
      return 'singe-choice|multi-choice'
    default:
      return type;
  }
}

তারপরে, আপনার টেমপ্লেট ফাইলে আপনি এমন কিছু করতে পারেন:

<div [ngSwitch]="getFormType(data.type)">
   <div *ngSwitchCase="'singe-choice|multi-choice'">FORM 1</div>
   <div *ngSwitchCase="'range'">FORM 2</div>
   <div *ngSwitchDefault>FORM 3</div>
</div>

টাইপগুলির জন্য নজর রাখুন যদিও ...