如何在 ngOnInit 中处理异步数据(带参数的路由)Angular 4
How to handle async data in ngOnInit (routing with parameter) Angular 4
我正在尝试从我的网络 api 控制器加载数据。
目前我正在使用我从组件的 ngOnInit 函数调用的 API 服务。
但是,视图中没有任何内容 return,因为它是异步数据
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;
}
}
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 中加载异步数据?
我也用过 promise,但是没用
如果你使用
{{user.view}}
在组件模板中,您会收到错误消息,因为 user
无法立即使用。
{{user?.view}}
(安全原生运算符)通过在 user
为 null 时不抛出异常来避免此错误。
我可以解决我的问题(与路由有关):
我的代码只需要插入这个:
<script>document.write('<base href="' + document.location + '" />');</script>
在 'head' 部分的顶部。
并从 app.component.ts 插入构造函数,此方法:
click() {
this.router.navigate(['', { foo: 'bar' }]);
}
我正在尝试从我的网络 api 控制器加载数据。 目前我正在使用我从组件的 ngOnInit 函数调用的 API 服务。 但是,视图中没有任何内容 return,因为它是异步数据
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;
}
}
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 中加载异步数据? 我也用过 promise,但是没用
如果你使用
{{user.view}}
在组件模板中,您会收到错误消息,因为 user
无法立即使用。
{{user?.view}}
(安全原生运算符)通过在 user
为 null 时不抛出异常来避免此错误。
我可以解决我的问题(与路由有关): 我的代码只需要插入这个:
<script>document.write('<base href="' + document.location + '" />');</script>
在 'head' 部分的顶部。
并从 app.component.ts 插入构造函数,此方法:
click() {
this.router.navigate(['', { foo: 'bar' }]);
}