Question

当前我在数组中的过滤器函数中实现了，这是程序。

 <HTML>
                       <div *ngFor="let cinemadatas of cinoperator">
                                <a class="dashboard-stat dashboard-stat-v2 white button-cathay" (click)="getOperatorId(cinemadatas._id)" href="javascript:void(0)">

                                    <div class="desc uppercase">
                                                <strong>{{ cinemadatas.cinema_operator_name }}</strong>
                                            </div>
                                        </div>

                                    </a>
    <-----------------------------list of items------------------------------>   


    <tr class="cinema-row cathay" *ngFor="let cintable of filteredCinema">
                                                  <td>
                                                      <a href="/venues/cinemas/1" class="uppercase">{{cintable.cinema_name}}</a>
                                                      <span class="label label-sm label-warning label-mini">{{cintable.status}}</span>
                                                  </td>
                                                  <td>
                                                      <img src="/img/logo-cinema-operator-cathay.jpg" height="30">
                                                      {{cintable.cinema_operator_id}}
                                                  </td>
     <-------------------------com.ts-------------------------------->
    import { Component, OnInit } from '@angular/core';
import { CinemaService } from './cinemas.service'


@Component({
  selector: 'app-cinemas',
  templateUrl: './cinemas.component.html',
  styleUrls: ['./cinemas.component.css'],
  providers: [CinemaService]
})
export class CinemasComponent implements OnInit {

  cinoperator = [];
  filteredCinema = [];


  constructor(private cinemaService: CinemaService) {
  }
  ngOnInit() {

    this.cinema();
    this.master();

  }

 master() {
    this.cinemaService.getCinMaster()
      .subscribe(
      (response: any) => { this.filteredCinema = response; },
      (error) => console.log(error)
      );
  }

 cinema() {
    this.cinemaService.getCinMaster()
      .subscribe(
      (response: any) => { this.cinoperator = response; },
      (error) => console.log(error)
      );
  }


  getOperatorId(id: string) {
    console.log(id);
    this.filteredCinema = this.cinMaster.filter(function (e) {
      if (e.cinema_operator_id === id) {
        return e;
      }
      //return this.cinMaster;      
    });

  }
  }

如果我们选择一个选项（cinemadatas.cinema_operator_name），过滤器功能正在工作，它将获得过滤器，但是当我们选择下一个选项时，它将过滤，但之前选择的将不会在列表中生效。请帮我解决这个问题。

cinoperator = []; filteredCinema = [];两者都包含唯一ID

Answer 1

首先，始终将您的代码呈现为可读;）

但不得不提问。您应该将要筛选的值存储在数组中，例如storeFilters = [] getOperatorId(id: string) { if (this.storeFilters.indexOf(id) == -1) { this.storeFilters.push(id) } else { this.storeFilters.splice(this.storeFilters.indexOf(id), 1) } this.filteredCinema = this.cinMaster.filter(x => this.storeFilters.indexOf(x.id) != -1) }。然后根据选择推送或删除id，然后过滤您的阵列。所以......就像......

{{1}}

<强> DEMO

角度过滤功能4

1 个答案: