Question

我有一个SPA，允许用户输入一些参数来搜索明信片的数字集合。搜索功能是对api的调用，api查询数据库并返回最终以库格式显示的JSON。在选择其中一个图像后，应用程序导航到新视图，其中显示所选图像的详细信息。如果我按下浏览器的后退按钮，行为就像预期的那样，用户将被带回图库。遗憾的是，虽然数据存在（console.log输出保存数据的对象的内容），但它不会显示在页面上。

我认为这可能是我打电话的方式，但由于数据存在，我不相信它的情况。我是否对将数据绑定到模板的方式做错了？我错过了什么？任何想法或建议都非常感谢！

谢谢！

<div *ngIf="checked else details">
    <mat-card >
        <p>Some information of how you could search...</p>
    </mat-card>
</div>

<ng-template #details>
<!-- <p>Test</p> -->
<div>
    <div fxFlex="100" fxLayoutWrap fxLayoutAlign="start start">
        <mat-card *ngFor="let postcard of postcards" [routerLink]="['/postcard', postcard.postcard_id]">
            <img mat-card-image [src]="postcard?.img" [alt]="postcard?.postcard_id" class="postcards"> <!-- (click)="display_postcard(index)"> -->
            <mat-card-actions>
                <span class="span-left">{{postcard?.posted_from}}</span>
                <span class="span-right">{{postcard?.year}}</span>
            </mat-card-actions>
        </mat-card>
    </div>
</div>

private years: any;
private api: ApiService;
public ref: ChangeDetectorRef;

public postcards: Observable<Array <Postcard>>;
public static checked: boolean = true;

constructor(api: ApiService, public router: Router, ref: ChangeDetectorRef) {
    this.api = api;
    this.ref = ref;

    //filter for the proper event
    this.router.events.filter(e => e.constructor.name === 'RoutesRecognized').pairwise()
      .subscribe((e: any[]) => {
        if(e[1].urlAfterRedirects == '/search'){
          let arr = (e[0].urlAfterRedirects).split("/");
          if(arr[1] == 'postcard'){
            console.log(this.postcards); //outputs the correct return of the api call :)
            // console.log(this.ref._view.component.postcards);
            // this.ref.reattach();
          }
        }
    });
}

ngOnInit() {
  this.getYears();
}

private getYears(){
  this.api.getYears().subscribe(res => {
    this.years = res;
  });
}

search = function(){
  this.api.getPostcards(this.surname != null ? this.surname : '', this.town != null ? this.town : '', this.from != null ? this.from : '', this.year != null ? this.year.year : '').subscribe(res => {
    this.postcards = res;
    // console.log(this.postcards);
  })
}

和api电话：

public getPostcards(surname, town, from, year) : Observable<Postcard []> {
    return this.http.post(this.urlBase + '/getPostcardsBySearch', {
      'surname' : surname,
      'town' : town,
      'from' : from,
      'year' : year
    }).map((res:Response) => res.json())
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
}

Answer 1

您的release/acquire是一个Observable，因此您的模板应该使用异步数据。我建议你在你的observables名字中添加一个postcards，这样你就不会感到困惑。例如$。

The pipe async会订阅您的观察结果：

postcards$

Answer 2

修正了它！我最终做的是将存储库保存到localStorage并检测用户何时离开/到页面以删除/显示选择。

这是新的代码：

  constructor(api: ApiService, public router: Router, ref: ChangeDetectorRef) {
this.api = api;
this.ref = ref;

//filter for the proper event
this.router.events.filter(e => e.constructor.name === 'RoutesRecognized').pairwise()
  .subscribe((e: any[]) => {
    //when navigating away from the search page -> delete the repository
    if(e[0].url == '/search'){
      let arr = (e[1].urlAfterRedirects).split("/");
      if(arr[1] != 'postcard'){
        localStorage.removeItem('postcards');
      }
    }

    //when navigating away from the details page of the postcard -> delete the repository
    let arr = (e[0].url).split("/");
    if(arr[1] == 'postcard' && e[1].urlAfterRedirects != '/search'){
      localStorage.removeItem('postcards');
    }
  });

}

ngOnInit() {
  this.postcards = JSON.parse(localStorage.getItem('postcards'));
}

search = function(){
  this.api.getPostcards(this.surname != null ? this.surname : '', this.town != null ? this.town : '', this.from != null ? this.from : '', this.year != null ? this.year.year : '').subscribe(res => {
    this.postcards = res;
    localStorage.setItem('postcards', JSON.stringify(this.postcards));
  })
}

背面的角度数据绑定

2 个答案: