用户无法通过刷新 Angular4 上的输入绑定使用

Posted 2023-02-23

【中文标题】用户无法通过刷新 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;