在 angular 中查看之前如何等待数据加载 2

Question

分量：

export class HomeComponent implements OnInit {

  tridentData: TridentData;

  constructor(private tridentServices: TridentService) { }

  ngOnInit() {
    this.tridentServices.getTridentData()
                    .subscribe(
                      (data: TridentData) => {
                        this.tridentData = data;
                      }
                    )
  }
}

HTML:

<h1>{{ tridentData }}</h1>   <---results in undefined

问题：

我在我的 tridentData 对象上调用 getTridentData()（一个 GET 请求，那个 returns json）。我有一个 ASYNC 问题，在我的 tridentData 对象可以检索数据库数据之前加载视图。这导致未定义的 tridentData 和我的整个分页符。如何实现加载动画并让视图在弹出之前等待数据加载？

Answer 1

在您的模板中，您可以向 h1 标签添加条件：

<h1 *ngIf="tridentData">{{ tridentData }}</h1>

Answer 2

我们需要查看您的 getTridentData() 代码才能确定，但实际上您可能想要做的是使用异步管道。

{{ tridentData | async }}

Answer 3

      showTridentData:Promise<boolean>;

      ngOnInit() {
        this.tridentServices.getTridentData()
                        .subscribe(
                          (data: TridentData) => {
                            this.tridentData = data;
                            this.showTridentData=Promise.resolve(true);
                          }
                        );
      }

在您的 HTML 中用作此

 <h1 *ngIf="showTridentData | async">{{tridentData}}</h1>

在 angular 中查看之前如何等待数据加载 2

how do you wait for data to load before view in angular 2

asynchronous

loading

angular