javascript - 单击选择选项后如何更新页面上的内容？

Question

我有一个提要。该提要中有一个“帖子”列表。通过从选择选项列表中选择新城市，可以使用来自不同城市的帖子来更新提要。我在后端使用 Onymos 服务 在我的标题中，我在标题“纽约”中插入了默认城市的名称。在构造函数中，我调用了一个我制作的服务，该服务设置为在页面加载时使用纽约帖子填充提要，并在新城市选择上更新提要。
我的代码工作得很好，可以在加载时用“纽约”帖子填充提要，并更改新城市选择的标题标题。然而，我无法更新提要以显示来自新选择的城市的帖子。我尝试将页面 window.location.reload 放在不同的位置，但这要么导致崩溃并且没有页面渲染，要么导致选择列表不起作用。

HTML

<ion-header > 
   <ion-navbar id="navbar" class="toolbar-background">   

  <ion-toolbar>

        <ion-title id="title"><p><span class="title">MyTitle</span>{{selectedCity}}</p></ion-title> 
        <ion-buttons end>

<ion-icon id="icon" name="heart">Change City</ion-icon>

                <ion-select id="select" [(ngModel)]="selectedCity" (ionChange)="changeCity(selectedCity)" >
                        <ion-option value="New York">New York</ion-option>
                        <ion-option value="Philadelphia">Philadelphia</ion-option>
                        <ion-option value="Boston">Boston</ion-option>
                        <ion-option value="L.A.">L.A.</ion-option>
                        <ion-option value="San Francisco">San Francisco</ion-option>

               </ion-select>

         </ion-buttons>

      </ion-toolbar> 
       </ion-navbar>

   </ion-header> 

  <ion-content id="content">

     <ion-card id="card" *ngFor="let event of listOfEvents" >         


       //Code for post info goes here on this card 

    </ion-card>

</ion-content >

myService.TS

import { Injectable } from '@angular/core';

declare var OnymosUtil:any;

@Injectable()
export class getPosts {
constructor(){}


     listOfEvents: Array<any> = []; 

     newCity: string; 


/*Below is the service that gets the posts to populate the feed. I thought I could pass it a variable that could determine reload or not*/ 

getPosts(selectedCity,reloadPg){



   /*should there be a page refresh here?  */

if(reloadPg == true){
window.location.reload();
}


this.newCity = selectedCity; 

let that = this; 

    OnymosUtil.getData(

        '/events/' + this.newCity ,    

        function successCallback (listOfEventsObject) {

                for (var x in listOfEventsObject) {

                   that.listOfEvents.push(listOfEventsObject[x]);
                }




        },

        function failureCallback (error) {
            alert(error);
        },

        {

            orderByField:'createdTime',
        }); 

    }//end getPosts

ma​​inTS。

import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { LoadingController } from 'ionic-angular';
import { getPosts } from '../../services/getPosts.service';


 declare var OnymosUtil:any;



@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [getPosts]
})
export class Home {

     listOfEvents: Array<any> = []; 

     selectedCity: string = 'New York';

     reloadPg: boolean; 





 constructor (public navCtrl: NavController, public modalCtrl: ModalController, public loading: LoadingController, public getPostSrvc: getPosts) {



getPostSrvc.getPosts(this.selectedCity); /*this populates the feed with the default city's posts from New York*/

this.listOfEvents = getPostSrvc.listOfEvents; 

}// end of constructor

/*here is where I tried to use a reload:*/

changeCity(selectedCity){

this.reloadPg = true; 

           this.getPostSrvc.getPosts(selectedCity, this.reloadPg);

      };

}//close class 

Answer 1

以下是有关如何更新列表的基本示例。尽管事件是硬编码的，但想法仍然是一样的。

import {Component, NgModule, VERSION, onInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

const events = [
  {
    city: 'New York',
    events: [
      {
        title: 'Comedy in Broadway',
        description: 'Get ready to pee your pants laughing'
      },
      {
        title: 'Puertorican Day Parad',
        description: 'Lots of traffic, loud music, great party!'
      }
    ]
  },
  {
    city: 'Chicago',
    events: [
      {
        title: 'Al Capone Memorial',
        description: 'Go back to the days of prohibition and how the gangsters ruled the city'
      },
      {
        title: 'White Sox vs Bears',
        description: 'Which is worse?'
      }
    ]
  }
];


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>City: {{ currentEvent.city }}</h2>
      <ul>
        <li *ngFor="let e of currentEvent.events">
          <h3> {{ e.title }} </h3>
          <div>
            {{ e.description }}
          </div>
        </li>
      </ul>
    </div>
    <div>
      <button (click)="changeCity('Chicago')">View Chicago Events</button>
      <button (click)="changeCity('New York')">View New York Events</button>
    </div>
  `,
})
export class App implements OnInit{
  name:string;
  currentEvent;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  ngOnInit() {
    this.currentEvent = events.filter(event => event.city === 'New York')[0];
    console.log(this.currentEvent);
  }

  changeCity(city) {
    this.currentEvent = events.filter(event => event.city === city)[0];
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Working Plnkr

就您而言，您将从服务获取数据，而不是使用 .filter。

通过服务进行编辑

*app.service.ts**

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class AppService {
  constructor(private http: Http) {}

  getAllEvents(): Promise<any>{
    return this.http.get('dummy_data.json').toPromise();
  }

  getEventsForCity(city): Promise<Array<any>> {
    let data = [];
    return new Promise((resolve, reject) => {
      this.getAllEvents().then(events => {
        events = events.json();
        data = events.filter(event => event.city === city)[0];
        if(!data) {
          return reject();
        }
        console.log(data);
        resolve(data):
      });
    });
  }
}

app.ts

//our root app component
import {Component, NgModule, VERSION, onInit} from '@angular/core'
import { HttpModule } from '@angular/http';
import {BrowserModule} from '@angular/platform-browser'
import { AppService } from './app.service';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>City: {{ currentEvent.city }}</h2>
      <ul>
        <li *ngFor="let e of currentEvent.events">
          <h3> {{ e.title }} </h3>
          <div>
            {{ e.description }}
          </div>
        </li>
      </ul>
    </div>
    <div>
      <button (click)="changeCity('Chicago')">View Chicago Events</button>
      <button (click)="changeCity('New York')">View New York Events</button>
    </div>
  `,
})
export class App implements OnInit{
  currentEvent = {
    currentCity: '',
    events: []
  };
  constructor(private appSvc: AppService) {

  }

  ngOnInit() {
    this.appSvc.getAllEvents()
      .then(events => {
        events = events.json();
        this.currentEvent = events.filter(event => event.city === 'New York')[0];
      });
  }

  changeCity(city) {
    this.appSvc.getEventsForCity(city).then(events => this.currentEvent = events);
  }
}

@NgModule({
  imports: [ BrowserModule, HttpModule ],
  declarations: [ App ],
  bootstrap: [ App ],
  providers: [ AppService ]
})
export class AppModule {}

Service Plunkr