0

我正在开发一个 Angular 应用程序。问题是我的模板annonces在相应组件中对变量 ( ) 的请求返回其值之前显示。所以我必须使用async管道。我尝试使用它，但模板中的变量没有刷新，并且我没有*ngFor指令的结果

这是组件

export class AppListProduitImmobilierComponent implements OnInit {

  public annonces: Observable<ProduitImmobilierDTO[]>
.................
.................
  ngOnInit() {
    this.preloadData();  // this function does a pre-request and afterwards call loadData(search)
................
...............
    loadData(search: Search) {
      this.annonces = this.service.getListProduitImmobilierDTO(this.pagesize, this.page, search);

模板部分如下：

<mat-card *ngFor="let annonce of annonces | async; let i = index" class="pointer">

服务如下：

  getListProduitImmobilierDTO(pagesize: number, page: number, search: Search): Observable<ProduitImmobilierDTO[]> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    const options = { headers: headers };
    search.page = page;
    search.pageSize = pagesize;
    return this.http.post<Search>('/api/produitimmobilier/all', JSON.stringify(search), options).pipe(map((search: Search) => search.result as ProduitImmobilierDTO[]));
  }
4

3 回答 3

0

由于我的 POST 请求有效（没有异步管道），我尝试从请求的结果中构建一个 observable 并在模板中使用它

在我的组件中：

public annonces$: Observable<ProduitImmobilierDTO[]> = new Observable<ProduitImmobilierDTO[]>();

    loadData(search: Search) {
      this.service.getListProduitImmobilierDTO(this.pageSize, this.page, search).subscribe(
        articles => {this.annonces = articles; 
          this.annonces$ = of(articles);
          this.collectionSize = articles[0].collectionSize; console.log('this.annonces'); console.log(this.annonces)},
        (err: HttpErrorResponse) => {
          console.log(err);
        }
      );
    }

并且在模板中

<mat-card *ngFor="let annonce of annonces$ | async; let i = index" class="pointer">

但它不起作用

于 2019-11-17T13:56:00.427 回答
0

...问题是我的模板在相应组件中的变量（annonces）请求返回其值之前显示。所以我必须使用异步管道......

这是不正确的。

您可以将数据保存在变量和*ngIf容器中以避免错误。

零件：

 public annonces: ProduitImmobilierDTO[];

 // ...
 ngOnInit() {
     this.service.getListProduitImmobilierDTO(this.pagesize, this.page, search)
         .subscribe(list => this.annonces = list);
 }

模板：

<div *ngIf="annonces">
    <mat-card *ngFor="let annonce of annonces; let i = index">
<div>

也就是说，使用|async时下，被认为是避免手动管理订阅的最佳实践，但最终取决于您。

于 2019-11-17T14:18:46.940 回答
0

今天早上，我打开我的电脑并更改代码以发出正常请求（即不使用异步管道）

loadData() 函数变成了以下

public annonces: ProduitImmobilierDTO[];
loadData(search: Search) {
  console.log('LOADDATA is called');
  this.service.getListProduitImmobilierDTO(this.pageSize, this.page, search).subscribe(
    articles => {this.annonces = articles; this.collectionSize = articles[0].collectionSize; console.log('this.annonces'); console.log(this.annonces)},
    (err: HttpErrorResponse) => {
      console.log(err);
    }
  );

使用 *ngFor 的相关模板如下

<mat-card *ngFor="let annonce of annonces; let i = index"  class="pointer">

而且我可以看到几乎立即发出 POST 请求，但是模板没有立即刷新（这就是我尝试异步管道的原因），而是在一段时间后。所以使用非异步管道和使用异步管道的区别在于，当不使用异步管道时，请求 POST 会立即发出，但在模板更新之前会有延迟。我认为使用异步管道，模板会在 POST 请求被触发时立即更新，但这种选择的问题是 POST 请求在非常长的延迟后到达服务器。所以我仍然被阻止：我的目标是在客户端和服务器端之间立即交互

于 2019-11-17T08:58:58.007 回答