角度 4 - 观察变量的属性以进行更改答案

【问题标题】：angular 4 - watch property of a variable for change角度 4 - 观察变量的属性以进行更改
【发布时间】：2021-01-31 02:27:13
【问题描述】：

我想查看 json 的嵌套属性。每当这个嵌套属性发生变化时，调用一个 fn()。

export class HeaderComponent  {
  user: any;

  constructor(){
    this.user = {
      options: [
        { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' },
        { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' },
        { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' }
      ],
      selected: { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' }
    }
  }

Fn 改变值

public changeUser(item) {
    this.user.selected = item;
    /*Some Code here*/
}

  public customLogin(user) {
        /*Some Code here*/
        this.user.selected = user;
        /*Some Code here*/
}

只要this.user.selected 的值发生变化，就会调用一个函数。我也在使用rxjx。

有什么建议吗？？

【问题讨论】：

HeaderComponent 需要监视值还是其他组件（父组件）？
提供更多信息，它将以何种方式改变。你可以试试ngDoCheck。
提供详细信息，例如：属性究竟是如何变化的，您想在哪里观察这种变化？
@dee zg @YordanNikolov 编辑帖子添加Fn changes values

标签： javascript angular

【解决方案1】：

你可以这样做：

export class HeaderComponent implements OnDestroy {
  user: any;
  userSelectSubject: BehaviorSubject<{name: string, img: string}>;
  private userSelectSubscription: Subscription;

  constructor(){
    this.user = {
      options: [
        { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' },
        { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' },
        { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' }
      ]
    }

    this.userSelectSubject = new BehaviorSubject<{name: string, img: string}>({ name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' });

    this.userSelectSubscription = this.userSelectSubject.subscribe((newSelectedUser) => {
      this.user.selected = newSelectedUser;
    });
  }

  ngOnDestroy() {
    this.userSelectSubscription.unsubscribe();
  }
}

那么你只需要调用this.userSelectSubject.next({...}) 传递新选择的用户作为参数。

【讨论】：

谢谢@Giovane 它帮助了
导入订阅但收到错误“.subscribe 不是函数”，我想念什么。？