如何在角度異步管道可觀察到

我有一個服務有一些異步的東西要做，我如何推遲數據綁定呈現，直到服務完成其異步工作？如何在角度異步管道可觀察到

this.sessionService.onSessionChange().subscribe(function(session) { 
    console.log(session); 
    self.user = session.user; 
});

服務：

onSessionChange(): Observable<Session> { 
    return this.sessionObservable.asObservable(); 
}

用戶是不確定的，因爲會議還沒有準備好：

<h4>Hi {{user.name}}.</h4>

如何使用管道與我onSessionChange觀察到的？

來源

2017-08-14 el_pup_le

您可以處理這種方式也使用safe navigation operator，

<h4>Hi {{user?.name}}.</h4>

來源

2017-08-14 02:04:25 Sajeetharan

由於@Sajeetharan回答，您可以使用safe navigation operator避免模板拋出未定義的錯誤。

正如您在問題標題中所述，您可以使用Async Pipe自動訂閱/取消訂閱Observable。

第一步：暴露可觀察你的分量：

// expose Observable in order to access at template 
user$: any; 
constructor(private sessionService: SessionService) { 
    this.user$ = this.sessionService.onSessionChange(); 
}

第二步：使用Async Pipe在您的模板訂閱創建可觀測

<h4>Hi {{(user$ | async)?.user.name}}.</h4>

工作DEMO

來源

2017-08-14 02:23:54 Pengyy

沒有任何理由，我應該還是用異步管比安全的導航操作員？ –

@el_pup_le它們沒有任何衝突。但是通過使用'async pipe'，你不需要退出'ngOnDestroy'處的observable來防止內存泄漏。這是因爲'async pipe'會自動爲你做。 – Pengyy

'（用戶$ |異步）'後面的'？'是不必要的。 – 2017-08-14 03:03:57

在Angular4 ，一個常見的習慣用法是使用新的as關鍵字如下：

<ng-container *ngIf="session$ | async as session"> 
           <!-- ^^^^^^^^^^ "as" keyword --> 
    <h4>Hi {{session.user.name}}</h4> 
</ng-container>

這甚至更多，如果你要在你的模板使用session在多個地方非常有用。

<ng-container>是一個掛起*ngIf或*ngFor而不添加更多節點到DOM的地方。

來源

2017-08-14 03:56:45

這不工作，它不顯示。我需要修改其他任何東西嗎？ –

我沒有得到它與Promise一起工作，但我想使用可觀察 –

使用pluck運營商有一個異步屬性：

在組件：

this.userName$ = this.sessionService.onSessionChange().pluck('user', 'name')

在模板：

<h4>{{ userName$ | async }}</h4>

來源

2017-10-25 12:10:31 VuuRWerK

如何在角度異步管道可觀察到

回答

相關問題