RxJSの行動主題およびngModelとのngModel結合

Question

どのようにこのように質問するのか分かりませんので、誰でもそれをクリアすることができればどうぞ。 ページに角型コンポーネントを2回配置し、ビヘイビアサブジェクトからデータを取得すると、ngModelを使用して入力にバインドするまで、すべて正常に動作します。私は何が起こっているのか分からないように見えます。私はプランカを付けました。入力を更新すると、入力はどこでも更新されます。私は私がはっきりしているのかどうかはわかりませんが、うまくいけばそれがはっきりとわかります。

http://plnkr.co/edit/OQFEGVJAJF5kHhWoTOpm?p=preview

アプリ成分：

import { Component } from '@angular/core'; 
import { FormsModule, FormBuilder, Validators } from '@angular/common'; 

import { TodoComponent } from 'app/todo.component'; 
import { TodoService } from 'app/todo.service'; 

@Component({ 
    selector: 'todo-app', 
    template: ` 

    <h3>Component 1</h3> 
    <todo-component></todo-component> 

    <br /><br /> 

    <h3>Component 2</h3> 
    <todo-component></todo-component> 
    ` 
}) 
export class AppComponent { 
    constructor() { } 
} 

成分：

import { Component } from '@angular/core'; 
import { TodoService } from 'app/todo.service'; 

@Component({ 
    selector: 'todo-component', 
    template: ` 
    <div *ngFor="let t of test | async"> 
     <div>test: {{t.prop}}</div> 
     <div>test: <input [(ngModel)]="t.prop"></div> 
    </div> 
    ` 
}) 
export class TodoComponent { 
    private test: any; 

    constructor(private todoService: TodoService) { } 

    ngOnInit() { 
    this.test = this.todoService.test; 
    } 
} 

サービス

import { Injectable } from '@angular/core';  
import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class TodoService { 
    private initialTestState = [{prop: 'val'}]; 
    private test$: BehaviorSubject<[]>; 
    private test: Observable<[]>; 

    constructor() { 
    this.test$ = new BehaviorSubject<[]>(this.initialTestState); 
    } 

    get test() { 
    return this.test$.asObservable(); 
    } 

} 

Answer 1

あなたは別のオブジェクト参照

get test() { 
    let obj = [{prop: 'val'}]; 
    return new BehaviorSubject<[]>(obj); 
    } 

を返す必要がありますが、別の何かをサービスに加入し、異なるオブジェクトに対して

@Component({ 
    selector: 'todo-component', 
    template: ` 
    <div *ngFor="let t of test; let i = index; "> 
     <div>test: {{test[i].prop}}</div> 
     <div>test: <input [(ngModel)]="test[i].prop"></div> 
    </div> 
    ` 
}) 

export class TodoComponent { 
    private test: any; 

    constructor(private todoService: TodoService) { } 

    ngOnInit() { 
    this.todoService.test.subscribe(o => this.test = o); 

    } 
}