为什么我的ngFor看起来像<!---->?我正在使用TransferState

时间:2019-09-02 19:07:26

标签: angular seo angular7 angular-universal universal

我正在使用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显示用户列表,但没有显示,而是显示了<!---->

我也尝试过卷发,但还是一样。

我做错了什么? 谢谢。

0 个答案:

没有答案