Angular2异步调用值未定义

Question

我有下面的 html 和 ts 代码 - 当我调试 typescript 代码时，我没有在参数中得到任何值，这是因为当传递值时没有进行后端调用，所以它发送未定义。 如何延迟 html 调用，这样我可以获得值？

html 文件：

   <button (click)="test()">
       <component [param]="param"></component>
   </button>

ts文件：

   @Input param: any;    
      test() {
        this.service.getData()
          .subscribe((val) => {
            this.param = val;
          });
    }

Answer 1

一种方法是在组件上放置一个*ngIf并仅在param变为真时才显示它。

<button (click)="test()">
       <component *ngIf="!!param" [param]="param"></component>
</button>

另一种方法是传递一个默认值，直到param变为真；

<button (click)="test()">
       <component [param]="param ? param : 'hello world'"></component>
</button>

我们将hello world作为默认值传递，但您可以传递任何您喜欢的值。