訂閱可觀察數據以獲取數據

我對可觀察數據的知識是有限的，所以可能很明顯我在這裏做錯了。訂閱可觀察數據以獲取數據

在我的Angular 2組件上初始化時，會發生此調用。

ngOnInit(): void { 
    this.route.paramMap 
     .switchMap((params: ParamMap) => this.userService.getUser(+params.get('id'))) 
     .subscribe(user => this.user = user); 
    console.info(this.user.id); 
}

這就要求這種服務方法：

getUser(id: number): Promise<User> { 
     let url = this.baseUserUrl + 'GetUserAsync?id=' + id; 
     return this.http.get(url) 
      .toPromise() 
      .then(resp => resp.json() as User); 
    };

在用戶對象用於

<div class="row padding-left"> 
    <div class="col-sm-6 base-info-container info-box-details"> 
     <table class="info-box"> 
      <tr> 
       <td>User Id: {{ user.id }}</td> 
       <td>Email: {{ user.email }}</td> 

      </tr> 
     </table> 
    </div> 
</div>

Resp.json的數據絕對帶回HTML代碼的片段，但用戶組件上的變量isnt正在設置，我不知道爲什麼。

來源

2017-10-11 Ben Donnelly

你好，可以你也提供了組件HTML中的一些代碼？ –

@ t3__rry編輯帖子以包含其中的片段 –

您是否嘗試添加'？'（安全導航器操作符：https://angular.io/guide/template-syntax#the-safe-navigation-operator----和-null-property-paths）如下：'user？.id'？ –

您可能需要使用安全導航操作員(Angular docs)?：user?.id;當你的視圖被渲染時，你的數據還沒有被獲取。

另外，在您的使用情況下，我會使用一個Resolver激活您的組件之前獲取DATAS，方法如下：

// in your route module 
const userRoutes: Routes = [ 
    { 
    path: 'user/:id', 
    component: YourComponent, 
    resolve: { 
     user: UserResolverService 
    } 
]; 


// User Resolver Service 
import { Injectable } from '@angular/core'; 
import {ActivatedRouteSnapshot, Resolve} from '@angular/router'; 
import {UserService} from 'your.user.service'; 

@Injectable() 
export class UserResolverService implements Resolve<any> { 

    constructor(private userService: UserService) { } 

    resolve(route: ActivatedRouteSnapshot) { 
    return 
     this.userService.getUser(route.paramMap.get('id')); 
    } 

} 

// In your user component 

constructor (private route: ActivatedRoute) { }  

ngOnInit() { 
    // Your snapshot's data matching user you defined in your route resolve 
    this.user = this.route.snapshot.data['user']; 
}

通過Thoughtram這個偉大的文章解釋得好：resolving-route-data-in-angular-2

來源

2017-10-11 09:06:57

嗨，所以我做了所有這些，但是我得到一個'通過服務器上的Http請求的URL必須是絕對'負載錯誤。這與我的服務代碼有關嗎？ –

從未見過這一個，但我發現這個線程：https://stackoverflow.com/questions/39234735/absolute-url-in-http-get-with-angular2 –

訂閱可觀察數據以獲取數據

回答

相關問題