C# 如何在ngOnInit（带参数路由）中处理异步数据

我正在尝试从我的web api控制器加载数据。 目前我正在使用我的API服务，我从组件的ngOnInit函数调用该服务。 但是，视图中不会返回任何内容，因为它是异步数据

Web 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;

        }
    }

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>

我的问题：如何在ngOnInit中加载异步数据？ 我也使用了promise，但如果您使用

{{user.view}}

在components模板中，您将得到一个错误，因为

user

不能立即使用

{{user?.view}}

（安全nativation运算符）通过在

用户

为空时不引发异常来避免此错误。

我可以解决我的问题（与路由相关）： 我的代码只需要插入以下内容：

<script>document.write('<base href="' + document.location + '" />');</script>

---

.subscribe（（user:user）=>{this.user=user；您是否尝试了console.log（this.user）来检查您收到的数据？请在视图中添加显示如何使用

user

的代码。即使您的代码是异步的，它仍然会设置

this.userService.getUserId（+params.get（'id'））

是有效的代码，最终会收到响应。如果您依赖立即可用的结果，您的代码可能会中断，但如果不查看代码，则很难判断。是的，我使用的是by console.log（this.user）但问题是关于web api控制器中的异步数据。我尝试了另一个例子，那就是工作导出类用户{constructor（public id:number，public name:string）{}let Users=[new User（11，'Mr.Nice'）、new User（12，'Narco'）]；let usersPromise=Promise.resolve（Users）；getUserId（id:number | string）{return usersPromise.then（users=>users.find（user=>user.id===+id））；}}视图{{user.name}中的代码注释中的代码很难阅读，请编辑您的问题并将代码添加到那里。谢谢Günter，我知道问题在于用户无法立即使用。我的问题是如何在ngOnInit中加载异步数据？您的代码已经加载了异步数据。您是否尝试过我的建议？是否检查了是否有错误？我尝试过使用您的s提示，但不起作用我用调试器执行代码并停止，但调试器不执行web api控制器中的函数，只执行userService.t“函数”到底是什么？好的，谢谢Günter，我认为这个问题与带参数的布线有关，因为我尝试了很多没有参数的例子，没有问题。我是angular 4的初学者，这里有我的第一个带参数布线的例子，只是时间，我会解决它。

{{user.view}}

{{user?.view}}

<script>document.write('<base href="' + document.location + '" />');</script>

click() {
    this.router.navigate(['', { foo: 'bar' }]);
}