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

问题：

我在getTridentData()对象上调用GET（A tridentData请求，返回json）。我有一个ASYNC问题，在我的tridentData对象可以检索db数据之前加载视图。这导致未定义的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>

如何以角度2

3 个答案: