Question

请考虑以下情形，也可以在https://stackblitz.com/edit/ionic-4-observables-playground此处找到：

问题

当我修改输入字段时，u1和u3的值会改变。由于[(NgModel)]与u1纠缠在一起，因此我希望在键入新值后立即在内存中修改u1和u3，但是只能瞬时读取{{1 }}不是u1。

我想念什么？

问题编辑1

我期望：u3会更改其值，因为双向数据绑定，但不会更改[(ngModel)]="u1.username"，因为它没有任何NgModel u3

场景

home.page.ts

<p>u3: {{u3.username}}</p>

user.service.ts

import { Component } from '@angular/core';
import {Observable, BehaviorSubject} from 'rxjs';
import 'rxjs/add/observable/from';
import {UserService} from '../user.service'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.css'],
})
export class HomePage {
  private u ='1'
  private all
  private u1 = {username: undefined}
  private u2 = {username: undefined}
  private u3 = {username: undefined}

  constructor(private users:UserService){}

  ngOnInit(){
    this.u3 = this.users.findByUsername(this.u)
    this.users.userList.subscribe( (data) => {
      this.all = data
      this.u1 = this.users.findByUsername(this.u);
      this.u2 = data[1]
    });
  }
}

home.page.html

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {Observable, BehaviorSubject} from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {

  public userList : BehaviorSubject<any[]> = new BehaviorSubject([
    { username: '1'}, {username: '2'}]);

  constructor() {}

  findByUsername(username: string) {
    return this.userList.value.find(each => each.username === username);
  }

}

Answer 1

u1和u3是对同一对象的两个引用。因此，如果您修改u1，也将修改u3：它们是同一对象：

this.u3 = this.users.findByUsername(this.u)
// so u3 is the element from the list which has this.u as its name

this.u1 = this.users.findByUsername(this.u);
// so u1 is also the element from the list which has this.u as its name

Answer 2

对于那些苦于“对象引用”主题的人，请查看以下游乐场：https://stackblitz.com/edit/ionic-4-observables-playground

加载home.page时，u3加载对该具体数组（ arr1 ）的特定对象（ obj1 ）的引用，{ {1}}，但订阅了新的传入数组。

点击“刷新数组”按钮后，u1将指向内存中不再存在的位置（ arr1 中的 obj1 ）新订阅发出数组的一部分（ arr2 中的 obj01 ），因此当您在输入字段中进行更改时，它不会上载其值，但是u3将更新它对新发出的数组内的对象的引用，因为它在预订内重新分配。

感谢JB Nizet

[（NgModel）]是否更新行为主题？

2 个答案: