2017-04-13 38 views
1

我有一個配置文件組件,通過api調用獲取用戶。用戶不能通過刷新輸入綁定Angular4

ProfileComponent

this.UserSubscription = this.auth.getUser().subscribe(res => { 
this.User = res; 
}) 

,我的用戶數據傳遞給孩子

<section class="user-achievements" *ngIf="User"> 
    <achievements [User]="User"></achievements> 
</section> 

AchievementsComponent

@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調用W¯¯作爲用戶未定義。 將數據加載到子組件的正確方法是什麼?

回答

0

給用戶一個類型。

一些有用的代碼

@Input() user:string; 
@Input() user:any; 
@Inpuy() user: UserType 

class UserType { 
id:number 
name:string; 
} 

constructor(user:UserType) { 
this.user = user; 
} 
1

他的問題是User是一個空的對象,因此他的病情被扔假陽性。

+0

感謝您坐在我旁邊。 – Jason