使用离子选择过滤结果

Question

我是 ionic 新手，正在学习一些教程并尝试学习和应用其他东西。我认为我想要实现的目标非常简单，但我似乎无法让它发挥作用。

我要做的只是使用 ion-select 元素过滤结果以显示其对应的选择。

所以我所拥有的是这个离子选择，我在哪里使用 ngModel 和 ngFor 来过滤用户应该拥有的选项，一旦用户选择他们的选项，应用程序应该只显示对应的结果，在这种情况下，一项运动（因此，如果用户在离子选择中选择“足球”，则只应显示“足球”离子卡，我在后端连接了那些。

我在这里添加一段代码，但恐怕您可能需要其他代码才能更清楚，所以请告诉我。伙计们干杯！

<ion-content padding>

<ion-item>
  <ion-label>Filter by Sport</ion-label>
  <ion-select [(ngModel)]="list" multiple="true">
    <ion-option *ngFor="let item of list">{{item.sport}}</ion-option>
  </ion-select>
</ion-item>

    <ion-card *ngFor="let item of list">    
      <ion-card-content>
        <ion-card-title>{{item.title}}</ion-card-title>
        <p>Sport: {{item.sport}}</p>
        <p>Participants: {{item.players}}</p>
        <p>When: {{item.when}}</p>
        <p>{{item.description}}</p>
        <p>Location: {{item.location}}</p>
        <button ion-button block (click)="joinEvent(item)">Join!</button>
      </ion-card-content>
    </ion-card>

</ion-content>

编辑：在下面添加了 .ts 代码：

export class JoinEventPage {

  filterListBy$
  filteredList$

    list: IEvent[];
  joined = [];

  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              public eventProvider: EventsProvider,
          public joinedEventsProvider: JoinedEventsProvider) {

  }

  ionViewDidEnter(){

    // create observable
    this.filterListBy$ = Observable.from(this.list)
      // pull out just the name of the sport
      .map((a: any) => a.sport)
      // make sure items are distinct
      .distinct()
      // return an array
      .toArray();

    // force the initial filtering of the list
    this.changeCategory([])

    // this.eventProvider.listEvents().subscribe(res=>{
    //  this.list = res;
    // }, error => {
    //  console.log("Error: " + error.message);
    // });

    // this.joinedEventsProvider.getStorage('joined-events').then(res => {
    //   if(res){
    //     this.joined = res;
    //   }
    // });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad JoinEventPage');
  }

  joinEvent(item){
    for(let event of this.joined){
      if(event.id == item.id){
        console.log("You already joined this event!")
        return;
      }
    }
    this.joined.push(item);
    this.joinedEventsProvider.setStorage('joined-events', this.joined);
  }

  changeCategory(_value) {
    // if nothing selected, show all
    if (!_value.length) {
      return this.filteredList$ = Observable.from(this.list).toArray();
    }

    // if something selected, filter the list based on the item selected which 
    // will be in the array parameter "_value"
    this.filteredList$ = Observable.from(this.list)
      .filter((i) => { return _value.indexOf(i.sport) !== -1 })
      .toArray()
  }

}

解决方案：按照 Aaron 的解决方案，我对 .ts 文件所做的唯一更改如下：

ionViewDidEnter(){

    this.eventProvider.listEvents().subscribe(res=>{
    this.list = res; 

     // create observable
    this.filterListBy$ = Observable.from(this.list)
      // pull out just the name of the sport
      .map((a: any) => a.sport)
      // make sure items are distinct
      .distinct()
      // return an array
      .toArray();

    // force the initial filtering of the list
    this.changeCategory([])

    this.joinedEventsProvider.getStorage('joined-events').then(res => {
        if(res){
          this.joined = res;
        }
      });

    });


  }

Answer 1

在此处查看完整答案，但亮点如下

https://stackblitz.com/edit/ionic-tkqzr6

  ngOnInit() {
    // create observable
    this.filterListBy$ = Observable.from(this.list)
      // pull out just the name of the sport
      .map((a: any) => a.sport)
      // make sure items are distinct
      .distinct()
      // return an array
      .toArray();

    // force the initial filtering of the list
    this.onChange([])
  }

当用户选择一个选项时，我们调用 onChange

  onChange(_value) {
    // if nothing selected, show all
    if (!_value.length) {
      return this.filteredList$ = Observable.from(this.list).toArray();
    }

    // if something selected, filter the list based on the item selected which 
    // will be in the array parameter "_value"
    this.filteredList$ = Observable.from(this.list)
      .filter((i) => { return _value.indexOf(i.sport) !== -1 })
      .toArray()
  }

现在在 html 中

<ion-item>
    <ion-label>Filter by Sport</ion-label>
    <ion-select multiple="true" (ionChange)="onChange($event)">
        <ion-option *ngFor="let item of (filterListBy$ | async)">{{item}}</ion-option>
    </ion-select>
</ion-item>