Question

这是我的情况：我在服务器的集合中有一个对象列表，并且我需要以这种方式“过滤”结果：“全部”，“状态”，“工作”和“工作” “状态”中的“。”

目前，我有一个临时解决方案，使用（切换）和自定义查询到nodejs服务器，但仅适用于“全部”，“工作”（货物）或“州”。

component.ts

filtroCargo(filter: string) {
    switch (filter) {
      case 'all':
        this.cdtService.getPublished().subscribe(cdts => (this.cdts = cdts));
        break;
      case 'senador':
        this.cdtService
          .getCdtFiltroCargo('senador')
          .subscribe(cdts => (this.cdts = cdts));
        break;
      case 'depFed':
        this.cdtService
          .getCdtFiltroCargo('depFed')
          .subscribe(cdts => (this.cdts = cdts));
        break;
      case 'depEst':
        this.cdtService
          .getCdtFiltroCargo('depEst')
          .subscribe(cdts => (this.cdts = cdts));
        break;
      case 'sup1':
        this.cdtService
          .getCdtFiltroCargo('sup1')
          .subscribe(cdts => (this.cdts = cdts));
        break;
      case 'sup2':
        this.cdtService
          .getCdtFiltroCargo('sup2')
          .subscribe(cdts => (this.cdts = cdts));
        break;
      case 'vGov':
        this.cdtService
          .getCdtFiltroCargo('vGov')
          .subscribe(cdts => (this.cdts = cdts));
        break;
      case 'gov':
        this.cdtService
          .getCdtFiltroCargo('gov')
          .subscribe(cdts => (this.cdts = cdts));
        break;
    }
  }

component.html

<div class="container-fluid conteudo">
  <div class="row">
    <div class="col-md leftFront d-flex flex-column align-items-end border-right">
      <div class="row mb-3 pr-3">
        <select name="uf" id="uf" class="custom-select">
          <option disabled>Estado</option>
          <option *ngFor="let estado of estados | async" [ngValue]="estado">{{ estado.nome}}</option>
        </select>
      </div>
      <div class="row pr-3">
        <tabset [vertical]="true" type="pills" class="d-none d-md-block text-right">
          <tab heading="Todos" (select)="filtroCargo('all')"></tab>
          <tab heading="{{cargo.display}}" *ngFor="let cargo of cargos" (select)="filtroCargo(cargo.value)"></tab>
        </tabset>
        <!-- menu mobile -->
        <accordion class="d-block d-sm-none my-3">
          <accordion-group heading="Categorias" [isOpen]="isOpen" (click)="delayMenu()">
            <tabset [vertical]="true" type="pills" class="">
              <tab heading="{{cargo.display}}" *ngFor="let cargo of cargos" (select)="filtroCargo(cargo.value)"></tab>
            </tabset>
          </accordion-group>
        </accordion>
      </div>
    </div>
    <div class="col-md rightFront">
      <!-- *ngIf="cdt?.uf.sigla == 'RJ'" -->
      <div class="row">
        <ng-container *ngFor="let cdt of cdts">
          <div class="col-md-3">
            <app-candidato-card [cdt]="cdt"></app-candidato-card>
          </div>
        </ng-container>
      </div>
    </div>
  </div>
</div>

我怎么能做到这一点（以下部分的打印内容）：https://candidatos.novo.org.br/home？

Answer 1

您正在测试是否使用字符串，然后使用该字符串。没必要。

例如，假设有一个简单的函数应该返回它收到的数字：

function getSelf (n: number) {
  switch (n) {
    case 1: return 1
    case 2: return 2
    case 3: return 3
  }
}

不需要它，对吧？您可以这样做：

function getSelf (n: number) { return n }

或者，就您而言：

  filtroCargo(filter: string) {
    switch (filter) {
      case 'all':
        this.cdtService.getPublished().subscribe(cdts => (this.cdts = cdts));
        break;
      default:
        this.cdtService
          .getCdtFiltroCargo(filter)
          .subscribe(cdts => (this.cdts = cdts));
        break;
    }
  }

如何在Angular 6中制作“过滤器”

1 个答案: