用户无法通过刷新 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 上的输入绑定使用的主要内容,如果未能解决你的问题,请参考以下文章

如何让 gzip 压缩在 WCF 4.5 中工作

当值更改时,Angular 4 刷新 <img src= ... >

Vue学习系列——初识Vue.js核心

winform。 listview 更新数据后刷新

Angular4从脏检查中排除属性

Typescript,Angular4:刷新浏览器后数组为空