文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >未使用@Input装饰器Angular2传递的对象

问未使用@Input装饰器Angular2传递的对象
EN

Stack Overflow用户
提问于 2018-02-07 22:04:06
回答 2查看 248关注 0票数 2

从订阅获取数据时，我的数据没有绑定到我的局部变量。

我有两个组件和一个服务。父组件从一个服务调用一个方法去做一个http get，这个get包含一个我需要绑定的user对象。但是，当在订阅之外对对象执行console.logging操作时，它看起来是未定义的。

下面是我的代码：

父组件：

代码语言：javascript
复制
selectedUser : User;
  onUserRowSelect(event): void {
    this.router.navigate(['../childComponent'], { relativeTo: this.route });

    this.formService.getUser(event.data.USER_ID).subscribe(result => {
      console.log(result); // <-- Object is logged properly.
      this.selectedUser = result; // Assigning the local @Input variable to the result
    });
  }

子组件：

代码语言：javascript
复制
  @Input() selectedUser : User;

      ngOnInit() {
        console.log(this.selectedUser); // Returns undefined.
      }

使用Http的服务：

代码语言：javascript
复制
getUser(id: number): Observable<User> {
    const _url = 'myURL/getuser/' + id;
    const headers = new Headers();
    headers.append('X-User', sessionStorage.getItem('username'));
    headers.append('X-Token', sessionStorage.getItem('token'));
    headers.append('X-AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    const options = new RequestOptions({ headers: headers });

    return this.http.get(_url, options)
        .map(response => {
            const responseAsObject = response.json();
            this.myUser = responseAsObject;
            return responseAsObject;
        });
}

所以我的问题在于，即使在向变量添加了@input装饰器之后，selectedUser在子组件中仍然是未定义的。

父HTML：

代码语言：javascript
复制
    <div>
    <div class="row-md-6">
        <nb-card title="List of Users">
            <ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>
        </nb-card>
    </div>
</div>

子HTML：

代码语言：javascript
复制
<div id="top">
<nb-card>
    <nb-card-header>Update User</nb-card-header>
    <nb-card-body header="Update User">
        <div class='row'>
            <div class='col-md-6'>
                <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)">
                    <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['username'].valid}">
                        <label>Username</label>
                        <input [(ngModel)]="username" class="form-control" id="username" type="text" [formControl]="complexForm.controls['username']">
                    </div>
                    <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['group_id'].valid}">
                        <label>Group ID</label>
                        <div class="row" *ngIf="roles.length">
                            <div class="col-md-4">
                                <select [(ngModel)]="selectedGroup" name="group_id" (change)="onChange($event)" class="form-control" [formControl]="complexForm.controls['group_id']"
                                    data-width='200px'>
                                    <option [ngValue]="role.GROUP_ID" *ngFor="let role of roles">
                                        {{role.NAME}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>First Name</label>
                        <input [(ngModel)]="fname" class="form-control" type="text" [formControl]="complexForm.controls['fname']">
                    </div>
                    <div class="form-group">
                        <label>User ID</label>
                        <input [(ngModel)]="ID" class="form-control" type="text" [formControl]="complexForm.controls['USER_ID']">
                    </div>
                    <div class="form-group">
                        <label>Last Name</label>
                        <input [(ngModel)]="lname" class="form-control" type="text" [formControl]="complexForm.controls['lname']">
                    </div>
                    <div class="form-group">
                        <label>Organization</label>
                        <input [(ngModel)]="organization" class="form-control" type="text" [formControl]="complexForm.controls['organization']">
                    </div>
                    <div class="form-group">
                        <label>Phone</label>
                        <input [(ngModel)]="phone" class="form-control" type="text" [formControl]="complexForm.controls['phone']">
                    </div>
                    <div class="form-group">
                        <label>Creation Date</label>
                        <input [(ngModel)]="creationDate" class="form-control" type="text" [formControl]="complexForm.controls['creation_date']">
                    </div>
                    <div class="form-group">
                        <label>Last Login</label>
                        <input [(ngModel)]="lastLogin" class="form-control" type="text" [formControl]="complexForm.controls['last_login']">
                    </div>
                    <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['status'].valid}">
                        <label>Status</label>
                        <div class="row" *ngIf="statuses.length">
                            <div class="col-md-6">
                                <select [(ngModel)]="selectedStatus" name="stasus" (change)="onChange($event)" class="form-control" [formControl]="complexForm.controls['status']"
                                    data-width='500px'>
                                    <option [ngValue]="status.STATUS" *ngFor="let status of statuses">
                                        {{status.STATUS_DESC}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Logged In</label>
                        <input [(ngModel)]="loggedIn" class="form-control" type="text" [formControl]="complexForm.controls['logged_in']">
                    </div>
                    <div class="form-group">
                        <label>Password Bad Tries</label>
                        <input [(ngModel)]="pwdBadTries" class="form-control" type="text" [formControl]="complexForm.controls['pwd_badtries']">
                    </div>
                    <div class="form-group">
                        <label>Title</label>
                        <input [(ngModel)]="title" class="form-control" type="text" [formControl]="complexForm.controls['title']">
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input [(ngModel)]="email" class="form-control" type="text" [formControl]="complexForm.controls['email']">
                    </div>
                    <div class="form-group">
                        <label>User Expiry in Days</label>
                        <input [(ngModel)]="userExpiryInDays" class="form-control" type="text" [formControl]="complexForm.controls['user_expiry_in_days']">
                    </div>
                    <div class="form-group" [ngClass]="{'has-error':!complexForm.controls['restricted_ip'].valid}">
                        <label>Restricted IP</label>
                        <input [(ngModel)]="restrictedIp" class="form-control" type="text" [formControl]="complexForm.controls['restricted_ip']">
                        <div *ngIf="complexForm.controls['restricted_ip'].hasError('pattern') && complexForm.controls['restricted_ip'].touched" class="alert alert-danger">Not a valid IP Address.</div>
                    </div>
                    <div class="form-group">
                        <label>Password Expiry Date</label>
                        <input [(ngModel)]="pwdExpdate" class="form-control" type="text" [formControl]="complexForm.controls['pwd_expdate']">
                    </div>
                    <div class="form-group">
                        <button type="submit" value="update" [disabled]="!complexForm.valid" class="btn btn-success">Update User</button>
                    </div>
                </form>
                <div>
                    <button type="submit" value="delete" class="btn btn-success" (click)="confirmDelete()">Delete User</button>
                </div>
                <br/>
                <div>
                    <button type="submit" value="delete" class="btn btn-success" (click)="getNewPassword()">Set Password</button>
                </div>
            </div>
        </div>
    </nb-card-body>
</nb-card>
angular
EN

回答 2

Stack Overflow用户

发布于 2018-02-17 01:59:16

这是一个很老的问题，但这里的答案是输入在构造函数中不存在，但它最终会存在。使用ngOnInit查看输入。

代码语言：javascript
复制
class ChildComponent implements OnInit {
  ngOnInit() {
    console.log(changes.selectedUser);
  }
  ...
}
票数 0
EN

Stack Overflow用户

发布于 2018-02-07 22:08:31

您的子进程中的onInit执行得太快。添加一个ngOnChanges方法并记录所有更改。您应该会看到，当它稍后在父进程中可用时，它也会在子进程中更新。

代码语言：javascript
复制
class ChildComponent implements OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes.selectedUser);
  }
  ...
}

请注意，您不需要ngOnChanges来获取它们。只有当您想要显式反应时，才会这样做。您可以简单地在组件可用之前准备好组件，使其在没有selectedUser的情况下工作(或者使用ngIf将其隐藏)。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48665821

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档