कोणीय में दो स्विच केस वैल्यू

Question

Php और java में हम कर सकते हैं

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>

मेरा दुर्भाग्य यह काम नहीं किया, किसी को भी ऐसा करने का बेहतर तरीका सुझा सकते हैं।

Comments

यह भी देखें github.com/angular/angular/issues/12174

— yurzui

Answer 1

(अन) सौभाग्य से आप नहीं कर सकते हैं; ngSwitchकाफी "गूंगा" है अगर आप स्रोत कोड को देखो: यह सिर्फ एक है ===मामले मूल्य और स्विच मूल्य के बीच। आपके पास दो विकल्प हैं, लेकिन दोनों महान से बहुत दूर हैं।

विकल्प 1 निर्देश का उपयोग कर रहा है *ngSwitchDefault, लेकिन यह केवल तभी काम करेगा जब आपके सभी कई मामले FORM 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>

Comments

वर्तमान में मैं पहली विधि का पालन कर रहा हूं

— नियाज

मैं दूसरे के लिए जा रहा हूं क्योंकि डिफ़ॉल्ट का अर्थ कुछ और है, इस विचार के लिए धन्यवाद!

— सेबेस्टियन डेक्रिको

मैं वहाँ इस फेंक रहा हूँ, किसी को जरूरत है अगर orएक Switch Case... शायद आप एक की जरूरत है *ngIf\: एक स्विच के बजाय

— MoshMage

दूसरा तरीका कमाल का है।

— khichar.anil

सुधारा जा सकता है:*ngSwitchCase="['multi-choice', 'singe-choice'].includes(data.type) ? data.type : '' "

— Maiko Kingma

Answer 2

आप निम्न का भी उपयोग कर सकते हैं, जो कि अधिक लचीला है। आप तब कुछ भी डाल सकते हैं जो बूलियन को * 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>

* एनजीआई ब्लॉक का उपयोग करने पर यह लाभ है कि आप अभी भी एक डिफ़ॉल्ट निर्दिष्ट कर सकते हैं।

Answer 3

आप इसे 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>

Comments

यह अब तक का सबसे साफ और कम से कम हैकी समाधान है। यह डॉक्स में भी संकेत दिया गया है : "प्रत्येक स्विच-केस स्टेटमेंट में एक इन-लाइन HTML टेम्प्लेट या टेम्प्लेट संदर्भ होता है"

— t.animal

यह समाधान सबसे साफ परिणाम देता है। धन्यवाद!

— कुडलमेइस्टर

चेतावनी का एक शब्द: #form1स्विचकेस 1 और 2 के बीच फिर से प्रस्तुत करने की सामग्री । कई लोगों के लिए यह कोई मायने नहीं रखेगा, लेकिन यदि घटक जटिल है, तो अभी के लिए आप * एनजीआईएफ के साथ बेहतर हैं।

— जेसी

Answer 4

जैसे MoshMage ने सुझाव दिया, मैंने *ngIfउन घटकों को संभालने के लिए एक का उपयोग करके समाप्त किया, जिन्होंने कई विकल्पों को संभाला:

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

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

Answer 6

कोशिश करें ng-switch-when-separator="|"मेंng-switch

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

Comments

कृपया ध्यान दें कि यह निर्देश एंगुलरजेएस की विशेषता है (aka v1), न कि कोणीय (aka v2 or higher)। भले ही यह अतीत में अनुरोध किया गया है, यह अभी तक कोणीय 2 से किसी भी संस्करण पर कोणीय 9 (इस टिप्पणी की तारीख तक) पर प्रदान नहीं किया गया है।

— नूनमो

Answer 7

यहां बताया गया है कि मैं यह कैसे करूंगा:

अपने में .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>

हालांकि टाइपो के लिए बाहर देखो ...