кнопка сегмента не активируется при нажатии

Question

это мой машинописный файл:

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, App, ViewController, Slides, Platform, LoadingController } from 'ionic-angular';
import { CategoriesPage } from '../categories/categories';
import { StatesProvider } from '../../providers/states/states';

@Component({
  selector: 'page-sell',
  templateUrl: 'sell.html'
})
export class SellPage {
  @ViewChild('mySlider') slider: Slides;
  tempStates: any;
  states = [];
  sellsegments: number;
  cities: any;
  patCat: string;
  ids = [];
  allCitiesLoadingController: any;

  constructor(public viewCtrl: ViewController, public appCtrl: App, public platform: Platform,
    public navCtrl: NavController, public stateProvide: StatesProvider,
    private loadingController: LoadingController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.patCat = this.navParams.get('patcat');
    this.getStates();
  }

  ionViewDidEnter() {
    this.getCities();
  }

  loader() {
    this.allCitiesLoadingController = this.loadingController.create({
      spinner: 'hide',
      content: `
      <div class="cssload-loader">
        <div class="cssload-inner cssload-one"></div>
        <div class="cssload-inner cssload-two"></div>
        <div class="cssload-inner cssload-three"></div>
      </div>`
    });
  }

  onSegmentChanged(segmentButton) {
    const selectedIndex = this.states.findIndex((slide) => {
      return slide.id === segmentButton.value;
    });
    this.slider.slideTo(selectedIndex);
    this.getCities();
  }

  onSlideChanged(slider) {
    const currentSlide = this.states[slider.getActiveIndex()];
    this.sellsegments = currentSlide.id;
  }

  getStates() {
    this.stateProvide.getStates()
      .then(data => {
        this.tempStates = data;
        if (this.patCat === 'tourism') {
          let countArr = Object.keys(this.tempStates).map(key => this.tempStates[key]).map(x => x.tourismCount);
          let j = 0;
          for (let i in countArr) {
            if (countArr[i] > 0) {
              this.states[j] = this.tempStates[i];
              j = j + 1;
            }
          }
          this.sellsegments = this.states[0].id;
        } else if (this.patCat === 'rent') {
          let countArr = Object.keys(this.tempStates).map(key => this.tempStates[key]).map(x => x.estateRentCount);
          let j = 0;
          for (let i in countArr) {
            if (countArr[i] > 0) {
              this.states[j] = this.tempStates[i];
              j = j + 1;
            }
          }
          this.sellsegments = this.states[0].id;
        } else if (this.patCat === 'buy') {
          let countArr = Object.keys(this.tempStates).map(key => this.tempStates[key]).map(x => x.estateSaleCount);
          let j = 0;
          for (let i in countArr) {
            if (countArr[i] > 0) {
              this.states[j] = this.tempStates[i];
              j = j + 1;
            }
          }
          this.sellsegments = this.states[0].id;
        }
      });
  }

  getCities() {
    this.cities = null;
    if (typeof this.ids[this.sellsegments] !== "undefined") {
      this.cities = this.ids[this.sellsegments];
    } else {
      this.loader();
      this.allCitiesLoadingController.present().then(() => {
        this.stateProvide.getCitiesPro(this.sellsegments)
          .then((data) => {
            this.allCitiesLoadingController.dismiss();
            this.cities = data;
            this.ids[this.sellsegments] = this.cities;
          });
      });
    }
  }
}

и его html:

  <ion-toolbar color="narenji">
    <ion-segment color="light" [(ngModel)]="sellsegments" (ionChange)="onSegmentChanged($event)">
      <ion-segment-button *ngFor="let state of states" [value]="state.id">
        {{state.name}}
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

<ion-content padding id="page2">

  <ion-slides [dir]="this.platform.dir()" #mySlider (ionSlideWillChange)="onSlideChanged($event)" (ionSlideDidChange)="onSlideChanged($event)">
    <ion-slide *ngFor="let state of states">
      <ion-list>
        <ion-item *ngFor="let city of cities?.cities" (click)="goToCat()">
          <ion-thumbnail item-left>
            <img [src]="'https://www.asasara.com/'+city.image_thumb">
          </ion-thumbnail>
          <h2 text-end>{{city.name}}</h2>
        </ion-item>
      </ion-list>
    </ion-slide>
  </ion-slides>

</ion-content>

слайды меняются, когда я провожу пальцем.но это не работает, когда я нажимаю на кнопки сегмента.хотя раньше это работалопроблема начинается, когда я изменил свою функцию getStates ().он просто должен был получить API и сохранить его в переменной states .но я немного изменил его, чтобы отображать только соответствующие данные в соответствии с кнопкой, которая была нажата на предыдущей странице.так что я не понимаю, почему он больше не работает.

Answer 1

похоже проблема заключалась в том, что я хранил свой API в массиве: states = []; , поэтому я изменил свой код, как показано ниже, и он работает: над конструктором я определил мои переменные следующим образом:

  tempStates: any;
  tempState = [];
  states: any;

и я изменил свою функцию getStates () , как показано ниже:

  getStates() {
    this.stateProvide.getStates()
      .then(data => {
        this.tempStates = data;
        if (this.patCat === 'tourism') {
          let countArr = Object.keys(this.tempStates).map(key => this.tempStates[key]).map(x => x.tourismCount);
          let j = 0;
          for (let i in countArr) {
            if (countArr[i] > 0) {
              this.tempState[j] = this.tempStates[i];
              j = j + 1;
            }
          }
          this.states = this.tempState;
          this.sellsegments = this.states[0].id;
        } else if (this.patCat === 'rent') {
          let countArr = Object.keys(this.tempStates).map(key => this.tempStates[key]).map(x => x.estateRentCount);
          let j = 0;
          for (let i in countArr) {
            if (countArr[i] > 0) {
              this.tempState[j] = this.tempStates[i];
              j = j + 1;
            }
          }
          this.states = this.tempState;
          this.sellsegments = this.states[0].id;
        } else if (this.patCat === 'buy') {
          let countArr = Object.keys(this.tempStates).map(key => this.tempStates[key]).map(x => x.estateSaleCount);
          let j = 0;
          for (let i in countArr) {
            if (countArr[i] > 0) {
              this.tempState[j] = this.tempStates[i];
              j = j + 1;
            }
          }
          this.states = this.tempState;
          this.sellsegments = this.states[0].id;
        }
      });
  }