angular - 为什么我的 ngFor 看起来像？我正在使用 TransferState

Question

我正在使用 Angular 7.0.7 Angular Universal 项目。一切似乎都很好，除了 SEO 部分。我遵循了很多教程，例如https://blog.worldline.tech/2018/03/08/angular-universal.html

节点服务器应该执行 GET 部分以显示已经包含信息的页面，但是当我使用https://search.google.com/structured-data/testing-tool时，没有显示任何 GET 请求。

import { HttpClient } from "@angular/common/http";
import { Component, OnInit, Inject } from "@angular/core";
import { Title, TransferState, makeStateKey } from "@angular/platform-browser";

export class TestComponent implements OnInit {
  test;

  constructor(
    @Inject(PLATFORM_ID) private _platformId: Object,
    private titleService: Title,
    private transferState: TransferState,
    private http: HttpClient
  ) {}

  ngOnInit() {
    this.test = [];

    let myTransferStateKey = makeStateKey<any>("myDatas");

    if (this.transferState.hasKey(myTransferStateKey)) {
      this.test = this.transferState.get(myTransferStateKey, {});
      this.transferState.remove(myTransferStateKey);

      console.log("Test w/o GET");
      console.log(this.test);
      console.log("transferstate key");
      console.log(myTransferStateKey);
    } else {
      this.http
        .get("https://reqres.in/api/users?page=2")
        .subscribe(response => {
          this.test = response["data"];
          this.transferState.set(myTransferStateKey, this.test);

          console.log("Test with GET");
          console.log(this.test);
          console.log("transferstate key");
          console.log(myTransferStateKey);
        });
    }
  }
}

<div class="container">
  <div class="row">
    <div class="col" *ngFor="let item of test">
      {{item.email}}
    </div>
  </div>
</div>

我希望https://search.google.com/structured-data/testing-tool显示用户列表，但它没有，而是显示一个<!---->.

我也尝试过卷曲，但结果是一样的。

我做错了什么？谢谢你。

标签： angularseoangular7angular-universaluniversal