Question

现在，我正在开发Apollo-GraphQL-Angular演示并遇到一些麻烦。

user-detail.component.html

<div *ngIf="user">

  <h2>{{user.username | uppercase}} Details</h2>
  <div><span>id: </span>{{user.id}}</div>
  <div>
    <label>username:
      <input [(ngModel)]="user.username" placeholder="username" />
    </label>
  </div>
  <button (click)="save()">save</button>

</div>

user-detail.component.ts

export class UserDetailComponent implements OnInit {
  @Input() user: User;

  ngOnInit(): void {
    this.getUser();
  }

  getUser(): void {
    const id = this.route.snapshot.paramMap.get('id');
    this.userService.getUser(id)
      .subscribe(user => this.user = user);
  }
}

user.service.ts

getUser(id: string): Observable<User> {
    // TODO: send the message _after_ fetching the hero
    this.messageService.add(`UserService: fetched user id=${id}`);
    return this.apollo
      .watchQuery({
        query: userQuery,
        variables: {
          userID: id
        }
      })
      .valueChanges.pipe<User>(
        map(({data}: {data: {user: object}}) => data.user)
      );
  }

现在在网页上，它可以显示当前用户的ID和用户名。但是，当我在输入元素中输入新的用户名时，当前用户对象不会更新。

如果我这样更改代码，则效果很好。

getUser(): void {
  this.user = {
    id: '1',
    username: 'test'
  }
}

因此，我认为AsyncPipe数据存在一些问题。有没有人可以帮助我解决这个问题？

我已经导入了FormsModule并定义了User

export class User {
  id: string;
  username: string;
}

Angular6 NgModel输入绑定到异步数据不起作用

0 个答案: