Получите результаты поиска без обновления страницы - PullRequest
Новая
       7

Получите результаты поиска без обновления страницы

0 голосов
/ 07 июня 2018

У меня есть кнопка поиска, где пользователь вводит данные (год, неделя, страница) и получает данные в формате сетки.Когда пользователь хочет найти другие данные, мне нужно обновить страницу, чтобы получить правильные данные.

Я хочу получить правильные данные, не обновляя страницу вручную.Я думаю, что это как-то связано с ngOnDestroy, но я не понимаю, как это повлиять.

Я прошел через много вопросов и сообщений, но не понял его правильно.

Ниже приведен мой код.

FlyerSearchComponent.ts 

export class FlyerSearchComponent {

  errorMessage: string;
  public flyers: Flyer[];
  public x: string;
  artnr: string;
  produkt: Produkt;
  imageUrl: string;

  private produktUrl = environment.apiUrl + 'static';

  constructor(private flyerhammService: FlyerHammService,
    private route: ActivatedRoute,
    private location: Location,
    private produktService: ProduktService) { };

  flyersearch(event, week: any, seite: any): Observable<Flyer[]> {
    let temp = week.split('-W');
    let jahr = temp[0];
    let woche = temp[1];
    let flyerBild: string;
    this.flyerhammService.getFlyer(jahr, woche, seite)
      .subscribe(
        flyers => {
          this.flyers = flyers;
          this.x = this.flyers[0].ArtNr;
        }
      )
      ).catch(
        error => console.log(error)
      );
  }

FlyerSearchComponent.html 

<md-card class="default-card">
  <h1>{{ 'Suche Flyer' }}</h1>
</md-card>
<md-card class="default-card">
  <form id="flyer-search">
    <table class="calender" cellspacing="0">
      <tr>
        <td>
          <md-input-container>
            <input mdInput placeholder="{{ 'Weak and Year' }}" type="week" #week name="week" value="2017-W17">
          </md-input-container>
        </td>
        <td>
          <md-input-container>
            <input mdInput placeholder="{{ 'Seite' }}" type="number" #seite name="seite" value="01" min="01">
          </md-input-container>
        </td>
        <td>
          <md-card-actions align="end">
            <button md-raised-button color="primary" (click)="flyersearch($event,week.value, seite.value)">
              {{ 'Search' }}
              <md-icon>search</md-icon>
            </button>
          </md-card-actions>
        </td>
      </tr>
    </table>
  </form>
</md-card>
<app-raster *ngIf="flyers!= null" [flyers]="flyers"></app-raster>

От FlyerSearchComponent, я передаю свойданные в RasterComponent.

Может кто-нибудь сказать мне, как получить правильные данные без обновления страницы?

1 Ответ

0 голосов
/ 07 июня 2018

Измените тип flyers: 

public flyers: Observable<Flyer[]>;

Вместо вызова .subscribe() на вашей getFlyer() наблюдаемой, сделайте что-то вроде этого: 

flyersearch(event, week: any, seite: any): Observable<Flyer[]> {
    let temp = week.split('-W');
    let jahr = temp[0];
    let woche = temp[1];
    this.flyers = this.flyerhammService.getFlyer(jahr, woche, seite);
}

Я нечтобы увидеть, где вы используете this.x, но чтобы получить этот набор, вы можете использовать оператор rxjs tap (хотя, возможно, есть лучший способ сделать это): 

flyersearch(event, week: any, seite: any): Observable<Flyer[]> {
    let temp = week.split('-W');
    let jahr = temp[0];
    let woche = temp[1];
    this.flyers = this.flyerhammService.getFlyer(jahr, woche, seite)
        .pipe(
             tap(flyers => this.x = flyers[0].ArtNr)
         )
}

Тогда в вашемшаблон, сделай: 

<app-raster [flyers]="flyers | async"></app-raster>
...