Как обрабатывать асинхронные данные в ngOnInit (маршрутизация с параметром) Angular 4

Я пытаюсь загрузить данные с моего контроллера веб-API. В настоящее время я использую свою службу API, которую я вызываю из функции ngOnInit компонента. Но в представлении ничего не возвращается, потому что это асинхронные данные.

Контроллер веб-API

[HttpGet("[action]")]
    public async Task<UserModel> GetUserById(int id)
    {
        Response.StatusCode = 200;
        try
        {
            _context = new AuthentificationDbContext();
            UserModel user = await _context.User.SingleOrDefaultAsync(m => m.id == id);
            if (user == null)
            {
                return null;
            }
            else
              return (user);
        }
        catch (SqlException ex)
        {
            throw ex;

        }
    }

userService.ts

getUserId(id: number) : Observable<User>{
    return this.http.get(this.url + 'userApi/GetUserById/?id=' + id)
        .map(res => <User>res.json())
        .catch(this.handleError);
}

app.routing.ts

{ path: 'user/:id', component: UserComponent}
export const routing = RouterModule.forRoot(appRoutes,{ 
                                            enableTracing:true});
export const routedComponents = [UserComponent];

user.component.ts

export class UserComponent implements OnInit {
private user: User;
constructor(private userService: UserService, private route: ActivatedRoute, private router: Router) { }

    ngOnInit() {  
           this.route.paramMap
                    .switchMap((params: ParamMap) =>
                        this.userService.getUserId(+params.get('id')))
                    .subscribe((user: User) => {
                        this.user = user;
                    });

    }

}

user.cshtml

<div *ngIf="user">{{ user.name}}</div>

Но когда я попробовал этот пример, это сработало, потому что не асинхронно

import { Injectable, Inject } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
export class User {
constructor(public id: number, public name: string) { }
}
let Users = [
new User(11, 'Mr. Nice'),
new User(12, 'Narco')
];
let usersPromise = Promise.resolve(Users);
@Injectable()
export class UserService {
constructor( @Inject(Http) public http: Http) { }

    getUserId(id: number | string) {
        return usersPromise
            .then(users => users.find(user => user.id === +id));
    }

}

Мой вопрос: как загрузить асинхронные данные в ngOnInit? Я также использовал обещание, но не работает