在 angular 中与 httpClient 的数据绑定第一次很慢

Question

我用 angular 9 和 .net core 3.1 编写了一个网站作为后端，问题是第一次需要 5 秒来显示和绑定 httpclient 的结果给用户，但是 api 那 api 只是需要 200 m/s 中的 post 人来响应。

http客户端服务

getShort(): Observable<Api<PostShort[]>> {
return this.http.get<Api<PostShort[]>>(this.apiUrl + 'getShort')
  .pipe(
    tap(),
    catchError(this.handleError('get', new Api<PostShort[]>()),
    ));
}

post的型号

export class PostShort {
    public id: number;
    public title: string;
    public categoryName: string;
    public stateName: string;
    public time: string;
    public images: PostImage[];
    public price: number;
    public type: number;
}

获取数据的组件

  ngOnInit(): void {
this.loading = true;
  this.dataService.getShort().subscribe(
    results => {
      if (results.isSuccess) {
        this.source = results.data;
      } else {
        this.errorToast.showSuccess(results.message);
      }

      this.loading = false;
    },
    error => {
      this.loading = false;
      this.error = error.message;
      this.errorToast.showSuccess(error.message);
    },
  );
}

html 视图：

      <ul class="row items ad-listing" *ngIf="source.length>0">
    <li *ngFor="let item of source"
      class="item col-lg-3 col-md-3 col-sm-12 product type-product post-509 status-publish first instock product_cat-sell-house has-post-thumbnail downloadable virtual product-type-simple">
      <div class="wrapper">
        <span class="ad_visit" *ngIf="item.type==2">{{ 'Home.Special' | translate }}</span>
        <div class="image">
          <h4 class="location">
            <a>{{item.stateName}}</a>
          </h4>
          <a [routerLink]="['/pages/more', item.id, item.title.replace(' ','-')]" [title]="item.title"
            class="title">
            <img width="300" height="300" *ngIf="item.images" [src]="item?.images[0]?.image" [alt]="item.title"
              sizes="(max-width: 300px) 100vw, 300px" />
          </a>
        </div>
        <span class="price">{{item.price}} $</span>
        <div class="meta">
          <a [routerLink]="['/pages/more', item.id, item.title.replace(' ','-')]" [title]="item.title"
            class="title">
            <h2>{{item.title}}</h2>
          </a>
          <figure>
            <i class="fa fa-calendar-o"></i>{{item.title}}</figure>
          <figure>
            <i class="fa fa-folder-open-o"></i><a rel="tag">{{item.categoryName}}</a>
          </figure>
        </div>
        <!--end meta-->
        <!--end description-->
      </div>
    </li>
  </ul>
  <div class="center ad-load-more" *ngIf="source.length==0 && loading">
    <div class="ad-loading" style="display: block;">
      <div class="ad-loader-show">
      </div>
    </div>
  </div>
  <div class="center ad-load-more" *ngIf="source.length==0 && !loading">
    <p>{{ 'Home.Nodata' | translate }}</p>
  </div>

这个问题只是我第一次打开网站，然后就可以了。
我为站点 chrome 和边缘浏览器测试了不同的主题，不同的网络

Answer 1

问题出在 windows 服务器的 IIS 选项中，它的启动模式应该是（始终运行）和（预加载）true

在 angular 中与 httpClient 的数据绑定第一次很慢

Data binding with httpClient in a angular is slow in first time

httpclient

.net-core

angular