angular - 如何让 Angular Universal 等待 API 响应？我使用了 transferState、resolve on route 等

Question

我试图让 Angular 等待 API 响应，但我没有成功。

我使用了 TransferState，它可以工作，但结果没有出现在 View Source 中。加载 View 后，Angular 仍然闪烁以显示响应。

我在路由模块上使用了 resolve 参数，但它是一回事。

我正在使用通用启动器 https://github.com/angular/universal-starter

我使用了像 reqres.in 和 https://jsonplaceholder.typicode.com/ 这样的测试 API他们工作。两者都显示在 View 源代码中，但我的 API 使用 Laravel 5 制作时却没有，我也不知道为什么。我的 API 以毫秒为单位的响应甚至比 jsonplaceholder 更快，但我对响应(它是一个数组)所做的 ngFor 仍然没有显示在查看源代码中。

我的 service.ts 上有这个

import { environment } from './../../../environments/environment';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class NestedService {

  // ----------  Headers -----------------
  public headers: HttpHeaders = new HttpHeaders({
    Accept: 'application/json',
    'Content-Type': 'application/json'
  });

  constructor(
    private http: HttpClient
  ) { }

  public getReq() {
    return this.http.get(environment.REQRES);
  }

  public mostrarProductos() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }

  public julienne() {
    return this.http.get('https://juliennecosmetic.com/backend/api/products?category=3');
  }
}

我的 component.ts 上有这个

import { NestedService } from './../services/nested.service';
import { Component, OnInit } from '@angular/core';
import { makeStateKey, TransferState } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';

const USERS_KEY = makeStateKey('products');
const PRODUCTS = makeStateKey('products2');
const JULIENNE = makeStateKey('products3');

@Component({
  selector: 'app-nested',
  template: `
    <p>
      nested worksa asfd safdsa!
    </p>

    <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 p-2 mx-auto bg-info" *ngFor="let user of julienne">
    <p>{{user.nombre_comercial}}</p>
    </div>
    </div>

    <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 p-2 mx-auto" *ngFor="let user of users">
      {{user.email}}
    </div>
    </div>

    <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3 p-2 mx-auto" *ngFor="let user of productos">
      <p>{{user.id}}</p>
      <p>{{user.body}}</p>
      <p>{{user.title}}</p>
    </div>
    </div>

  `,
  styles: []
})
export class NestedComponent implements OnInit {
  users;
  productos;
  julienne;

  constructor(
    private nested: NestedService,
    private state: TransferState,
    private aRoute: ActivatedRoute
  ) {}

  ngOnInit() {
    this.users = this.state.get(USERS_KEY, null);
    this.productos = this.state.get(PRODUCTS, null);
    this.julienne = this.state.get(JULIENNE, null);

    if (!this.julienne) {
      this.nested.julienne().subscribe(data => {
        console.log(data);
        this.julienne = data['response']['data'];
        this.state.set(JULIENNE, data['response']['data']);
      });
    }

    if (!this.users) {
      this.nested.getReq().subscribe(data => {
        console.log(data);

        this.users = data['data'];
        this.state.set(USERS_KEY, data['data']);
      });
    }

    if (!this.productos) {
      this.nested.mostrarProductos().subscribe(data => {
        console.log(data);

        this.productos = data;
        this.state.set(PRODUCTS, data);
      });
    }
  }
}

在此工具中，它仅显示 https://jsonplaceholder.typicode.com/并生成了要求列表，但不是 juliennecosmetic.com 上的第三个

https://search.google.com/structured-data/testing-tool#url=http%3A%2F%2F31.220.57.15%2Flazy%2Fnested

它可能是什么？

Answer 1

您实际上允许您的组件迭代一个不存在的列表，直到 API 响应为止。

您可以通过多种方式处理它，这完全取决于用户体验需求。

1. 将整个事物包装在一个条件中，即

<div *ngIf="users">
... *ngFor="let user of users ...
</div>

1. 提供空列表作为开始，这样 *ngFor 就可以迭代某些内容，但只是没有内容。

2. 切换一个 bool 标志，指示下载阶段已完成并且 UI 现在可以呈现，但这同样涉及在您至少有一个空列表要检查之前不会到达 *ngFor 逻辑。

附言这是你的问题:)

I'm trying to make Angular wait for the API response but I'm not having success.

在等待事情按顺序发生时忘掉你所知道的一切，你需要以其他方式适应初始状态直到事情发生，即不显示表格，显示微调器甚至不显示完全加载组件。