モデルの更新後にビューが変更されない

Question

サービスモデルを更新するときに問題が発生するサッカープロジェクトに取り組んでいます。私は2つのコンポーネント（AvailablePlayersとSelectedPlayers）と2つのサービス（AvailablePlayersServiceとSelectedPlayersService）を持っています。

利用可能なプレーヤーコンポーネントには、ユーザーがカスタムチームを構築できるすべてのプレーヤーが表示されます。 （ファンタジーフットボールを考えてください）選択されたプレーヤーコンポーネントは、利用可能なプレーヤーからユーザーが選択したすべてのプレーヤーをリストします。どちらのサービスもハードコーディングされたモデルしかないので、私がテストすることができます。

私の問題は、利用可能なプレーヤーコンポーネントの追加ボタンをクリックしてSelectedPlayersServiceモデルに追加すると、選択したプレーヤーコンポーネントのビューが更新されると予想されますが、何も起こりません。私のリストは正しく配置されているので、サービスがコンポーネントに正しく注入されていることがわかります。

私の推測ではモデルを見ている必要がありますが、角度2にその能力があるかどうかはわかりません。

可能players.component

@Component({ 
    selector: 'app-available-players', 
    templateUrl: './available-players.component.html', 
    providers: [AvailablePlayersService, SelectedPlayersService] 
}) 

export class AvailablePlayersComponent { 
    public _availablePlayers; 
    public _selectedPlayers; 

    selectPlayer = (data) => { 
     _selectedPlayers.addSelectedPlayer(data); // using running backs for testing AND I feel this is the problem 
    } 

    constructor(availablePlayers:AvailablePlayersService, selectedPlayers:SelectedPlayersService) { 
     this._availablePlayers = availablePlayers.getAvailablePlayers(); // get the available players model 
     this._selectedPlayers = selectedPlayers._selectedPlayersModel; // get the selected players model so I can add players to it 
    } 
} 

可能players.component HTML

<div class="player-card" *ngFor="let player of _availablePlayers; let i = index"> 
    <div class="playa-data"> 
     <span class="player-name">{{ player.name }}</span> 
     <i class="fa fa-plus" (click)="selectPlayer(i, player);$event.stopPropagation()"></i> 
    </div> 
</div> 

選択-players.service

@Injectable() 
export class SelectedPlayersService { 

    public _selectedPlayersModel; 

    public addSelectedPlayer = (data) => { 
     this._selectedPlayersModel.runningBacks.push(data); 
    } 

    constructor() { 
     this._selectedPlayersModel = [ 
      runningBacks: [{ 
       id: 2, 
       imageUrl: '423.png', 
       name: 'Player Bob', 
       position: 'RB', 
      }], 
     ]; 
    }; 
} 

選択-players.component

@Component({ 
    selector: 'app-selected-players', 
    templateUrl: './selected-players.component.html', 
    providers: [SelectedPlayersService] 
}) 

export class SelectedPlayersComponent { 
    private _selectedPlayers; 

    constructor(private selectedPlayers: SelectedPlayersService) { 
     this._selectedPlayers = selectedPlayers._selectedPlayersModel; 
    } 
} 

選択-players.component HTML

<div class="position-card"> 
    <span>Running Backs</span> 
    <div *ngFor="let player of _selectedPlayers.runningBacks"> 
     <span class="player-name">{{ player.name }}</span> 
    </div> 
</div> 

Answer 1

あなたは、コンポーネントのデコレータの両方でのプロバイダを注入しています。これは2つの異なるコピーを提供しますが、これはあなたが望むものではありません。サービスがあれば、たとえば、AppComponentなど、ツリー内のどこか高いところに1回だけ注入する必要があります。

また、サービスではデータをObservablesとして公開する必要があります。この方法で、データの変更をリスンすることができます。

@Injectable() 
export class SelectedPlayersService { 

    private _selectedPlayers; 
    public selectedPlayers$; //behaviour subject observable 

    public addSelectedPlayer = (data) => { 
     this._selectedPlayers.runningBacks.push(data); 
     this.selectedPlayers$.next(
      Object.assign({}, this._selectedPlayers) 
     ); 
    } 

    constructor() { 
     this._selectedPlayers = { 
      runningBacks: [{ 
       id: 2, 
       imageUrl: '423.png', 
       name: 'Player Bob', 
       position: 'RB', 
      }], 
     }; 
     this.selectedPlayers$ = new BehaviourSubject(
      Object.assign({}, this._selectedPlayers) 
     ); 
    }; 
} 

そして、あなたのコンポーネントは次のようにサブスクライブすることができます：これと同様に

もちろん

@Component({ 
    selector: 'app-selected-players', 
    templateUrl: './selected-players.component.html', 
    providers: [SelectedPlayersService] 
}) 
export class SelectedPlayersComponent { 
    private _selectedPlayers; 

    constructor(private selectedPlayers: SelectedPlayersService) { 
     this.selectedPlayers.selectedPlayers$.subscribe(
      players => this._selectedPlayer = players 
     ); 
    } 
} 

、あなたがimport { BehaviourSubject } from 'rxjs/BehaviourSubject';