Можете ли вы передать массив значений в ngSwitch?

Question

У меня есть функционирование ngSwitch

<div class="columnFormatting" [ngSwitch]="statusIds">
  <div *ngSwitchCase="2"> Do 2 </div>
  <div *ngSwitchCase="4"> Do 4 </div>
  <div *ngSwitchDefault> Default </div>
</div>

StatusIds может содержать одно или несколько целых чисел, разделенных запятыми.

Если statusIds равен [2,4], я хочу, чтобы он попадал в оба случая. Возможно ли это без цикла foreach вне коммутатора?

Answer 1

ngSwitch принимает только одно значение, но для отображения нескольких случаев вы можете сделать следующее.

<div class="columnFormatting" *ngFor="let status of statusIds" [ngSwitch]="status">
  <div *ngSwitchCase="2"> Do 2 </div>
  <div *ngSwitchCase="3"> Do 4 </div>
  <div *ngSwitchDefault> Default </div>
</div>

С комбинацией ngFor и ngSwitch вы можете достичь того, что вы просили. Вам не нужно иметь цикл for вне коммутатора, вы можете использовать его вместе с коммутатором, как я упоминал выше.

Для дальнейшего использования

Я надеюсь, что это поможет вам. Если у вас есть какие-либо проблемы или предложения, дайте мне знать.

Answer 2

Это устарело, но я искал этот ответ и в итоге нашел код ngSwitchCase и создал версию массива. Angular в основном использует этот код для проверки каждого ngSwitchCase с помощью DoCheck и внутри ngSwitch вызова _matchCase(value), также заметил, что код играет с подсчетом индексов, поэтому для каждого элемента в массиве вам нужно создать объект или проверить его самостоятельно. вне списка. Вот как я создал этот.

      import { NgSwitch } from '@angular/common';
import {Directive, DoCheck, Host, Input, OnInit, Optional, TemplateRef, ViewContainerRef, ɵRuntimeError as RuntimeError} from '@angular/core';

@Directive({
    selector: '[ngSwitchCaseArray]'
  })
  export class NgSwitchCaseArray implements DoCheck {
    private _view: SwitchView;
    /**
     * Stores the HTML template to be selected on match.
     */
    @Input() ngSwitchCaseArray: any[] = [];
  
    constructor(
        viewContainer: ViewContainerRef, templateRef: TemplateRef<Object>,
        @Optional() @Host() private ngSwitch: NgSwitch) {
        if (!ngSwitch) { // make sure we have a host
            throwNgSwitchProviderNotFoundError('ngSwitchCaseArray', 'NgSwitchCaseArray');
        }
        
      this._view = new SwitchView(viewContainer, templateRef);
      // either we add a case for each time we call ngSwitch._matchCase
      // or we only add one case and call matchcase once per check
      (this.ngSwitch as any)._addCase();
    }
  
    // this is how the ngSwitchCase works, just call's ngSwitch._matchCase(item) when true we're supposed to do something
    ngDoCheck() {
      this._view.enforceState(this.matchCase());
    }

    matchCase(): boolean {
      // advantage of us finding the item in our array, is we're not calling matchCase which requires 1 addCase per call
      //   so if the array changes it wont break the case code we initialize with
      var switchValue = (this.ngSwitch as any)._ngSwitch; // this is the value passed into ngSwitch
      var index = this.ngSwitchCaseArray.indexOf(switchValue); // grab index, jic value is null, undefined, etc.
      var item: any = this.ngSwitchCaseArray; // pass the array as default, should fail in most cases
      if (index != -1) item = this.ngSwitchCaseArray[index]; // get the actual value if we found an index
      return (this.ngSwitch as any)._matchCase(item); // MUST call _matchCase once and only once or you break ngSwitch
    }
  }

  // stuff below was copied from angular/packages/common/src/directives/ng_switch.ts 
  class SwitchView {
    private _created = false;
  
    constructor(
        private _viewContainerRef: ViewContainerRef, private _templateRef: TemplateRef<Object>) {}
  
    create(): void {
      this._created = true;
      this._viewContainerRef.createEmbeddedView(this._templateRef);
    }
  
    destroy(): void {
      this._created = false;
      this._viewContainerRef.clear();
    }
  
    enforceState(created: boolean) {
      if (created && !this._created) {
        this.create();
      } else if (!created && this._created) {
        this.destroy();
      }
    }
  }

  function throwNgSwitchProviderNotFoundError(attrName: string, directiveName: string): never {
    throw new RuntimeError(
        2000, //RuntimeErrorCode.PARENT_NG_SWITCH_NOT_FOUND,
        `An element with the "${attrName}" attribute ` +
            `(matching the "${
                directiveName}" directive) must be located inside an element with the "ngSwitch" attribute ` +
            `(matching "NgSwitch" directive)`);
  }

Тогда вам просто нужен код, чтобы он работал:

      <div *ngSwitch="objectValue">
    <div *ngSwitchCase="abc">abc found</div>
    <div *ngSwitchCaseArray="[ 'value', 'Value', null, 'Blah', 'etc.' ]">Found something in the array</div>
    <div *ngSwitchDefault>Nothing found</div>
</div>