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作為默認值傳遞，但您可以傳遞任何您喜歡的值。