用户无法通过刷新 Angular4 上的输入绑定使用
Posted
技术标签:
【中文标题】用户无法通过刷新 Angular4 上的输入绑定使用【英文标题】:User not available through input bindings on refresh Angular4 【发布时间】:2017-09-10 02:10:31 【问题描述】:我有一个通过 api 调用获取用户的 Profile 组件。
配置文件组件
this.UserSubscription = this.auth.getUser().subscribe(res =>
this.User = res;
)
我将用户数据传递给孩子
<section class="user-achievements" *ngIf="User">
<achievements [User]="User"></achievements>
</section>
成就组件
@Component(
selector: 'achievements',
template: `
<ng-container *ngIf="User">
<div *ngFor="let achievement of Achievements">
<h5>Achievment</h5>
<div>Name:</div>
<div>Progress:</div>
</div>
</ng-container>`,
styleUrls: ['./achievements.component.scss']
)
export class AchievementsComponent implements OnInit
@Input() User;
Achievements;
constructor(
private api: ApiClient,
)
ngOnInit()
console.log('this user', this.User);
this.api.get(`users/$this.User.id/achievements`)
.subscribe( res =>
this.Achievements = res.content;
);
重新加载时,控制台会显示我的 api 调用,其中未定义为用户。 将数据加载到子组件中的正确方法是什么?
【问题讨论】:
【参考方案1】:他的问题是 User
是一个空对象,所以他的条件是误报。
【讨论】:
【参考方案2】:给用户一个类型。
一些有用的代码
@Input() user:string;
@Input() user:any;
@Inpuy() user: UserType
class UserType
id:number
name:string;
constructor(user:UserType)
this.user = user;
【讨论】:
以上是关于用户无法通过刷新 Angular4 上的输入绑定使用的主要内容,如果未能解决你的问题,请参考以下文章