Question

我是离子技术的新手，跟随一些教程并尝试学习和应用其他内容。我认为我要实现的目标非常简单，但似乎无法正常工作。

我想做的只是使用离子选择元素过滤结果，以显示来自选择的相应选择。

所以我所拥有的是这个离子选择功能，在这里我使用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>

离子选择过滤结果

1 个答案: