Question

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

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

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

Answer 1

更改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>

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

1 个答案: