Question

我有一个配置文件组件，通过api调用获取用户。

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调用作为用户。将数据加载到子组件的正确方法是什么？

Answer 1

他的问题是User是一个空洞的物体，所以他的状况是假的。

Answer 2

向用户提供类型。

一些有用的代码

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

class UserType {
id:number
name:string;
}

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

刷新Angular4时，用户无法通过输入绑定获得

2 个答案: