时间戳

首页 > 解决方案 > 无需刷新页面即可获取搜索结果

angular - 无需刷新页面即可获取搜索结果

问题描述

我有搜索按钮，用户可以在其中输入数据（年、周、页）并以网格格式获取数据。当用户想要搜索其他数据时，我必须刷新页面以获取正确的数据。

我想在不手动刷新页面的情况下获得正确的数据。我认为这与 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。

谁能告诉我如何在不刷新页面的情况下获取正确的数据？

标签： angularangular2-directives

解决方案

更改类型flyers：

public flyers: Observable<Flyer[]>;

不要调用.subscribe()你的getFlyer()observable，而是执行以下操作：

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>

推荐阅读