Обновляет ли [(NgModel)] субъект поведения?

Question

Рассмотрим следующий сценарий, также доступный здесь https://stackblitz.com/edit/ionic-4-observables-playground:

Вопрос

Когда я изменяю поле ввода, значение u1и u3 изменяется. Поскольку [(NgModel)] запутан с u1, я ожидал, что u1 и u3 будут изменены в памяти, как только я наберу новое значение, но только мгновенное чтение для u1, а не u3.

Чего мне не хватает?

Вопрос Редактировать 1

Я ожидал: [(ngModel)]="u1.username" изменит свое значение из-за двусторонней привязки данных, но не u3, так как не имеет NgModel <p>u3: {{u3.username}}</p>

Сценарий

home.page.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]
    });
  }
}

user.service.ts

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);
  }

}

home.page.html

<ion-content padding>
  <ion-item>
    <ion-label position="floating">username</ion-label>
    <ion-input
    name="username"
    type="text"
      [(ngModel)]="u1.username"
      required
    ></ion-input>
  </ion-item>
  <p *ngFor="let each of all; let i = index">u{{i +1}}: {{each.username}}</p>
  <p>u3: {{u3.username}}</p>
</ion-content>

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 загружает ссылку на определенный объект ( obj1) этого конкретного массива ( arr1 ), так же как и u1, но с подпиской на новые входящие массивы.

Как только вы нажмете кнопку «Обновить массив», u3 будет указывать на место в памяти ( obj1 внутри arr1 ), которое больше не является частью нового отправленного массива подписки ( obj01 внутри arr2 ) следовательно, он не будет загружать свое значение при изменении его в поле ввода, но u1 обновит свою ссылку на объект внутри нового излучаемого массива, поскольку он переназначается внутри подписки.

Спасибо JB Низет