將對象從一個組件移動到Angular5中的同級組件

Question

我正在開發一個清單應用程序，該應用程序將一個對象從一個組件轉移到同一個同級組件。 我還想將每一步的moves屬性減少1。 我在將所選項目實際推入同級數組時遇到了麻煩。

這是我的數據示例...

import { player } from "./player";

export const PLAYERS: player[] = [
  {
    index: 1,
    photo: "../../assets/images/lonzo.jpeg",
    name: "Lonzo Ball",
    position: "G",
    moves: 5
  },
  {
    index: 2,
    photo: "../../assets/images/Brook.jpeg",
    name: "Brook Lopez",
    position: "C",
    moves: 5
  },

這就是我在服務文件中所擁有的...

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Subject } from 'rxjs/Subject';
import { player } from "./player";
import { PLAYERS } from "./players";
import 'rxjs/add/observable/of';
import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";
import { bench } from './bench';
import { RESERVES } from './RESERVES';

@Injectable()
export class DataService {

  public players = <any>PLAYERS;
  public bench = <any>RESERVES;


public getPlayers(): Observable<player[]> {
    return Observable.of(this.players);
  }

  public getReserves(): Observable<bench[]> {
    return Observable.of(this.bench);
  }

  addToReserves(data) {
    this.bench.next(data);
  }

  addToStarter(data) {
    this.players.next(data)
  }

    constructor() {}
}

這就是我在starters.ts文件中所擁有的...

import { Component, OnInit } from "@angular/core";
import { DataService } from '../data.service'
import { player } from "../player";

@Component({
  selector: "app-roster-box",
  templateUrl: "./roster-box.component.html",
  styleUrls: ["./roster-box.component.css"],

})
export class RosterBoxComponent implements OnInit {
  moves: number = 5;
  btnText: string = "Move to Bench";
  players: Array<any>


constructor(public dataService: DataService) {}

getPlayers() : void {
    this.dataService.getPlayers()
      .subscribe(players => this.players = players);
  }


ngOnInit() {

      this.getPlayers();


  }
  moveToBench( data, i): void {
    this.dataService.addToReserves(data)

    // this.players.splice(i, 1);


}

  }

最后是bench.ts文件的代碼...

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../app/data.service'
import { bench } from "../bench";

@Component({
  selector: 'app-roster-bench',
  templateUrl: './roster-bench.component.html',
  styleUrls: ['./roster-bench.component.css']
})
export class RosterBenchComponent implements OnInit {

  moves: number = 5;
  btnText: string = "Make Starter";
  reserves: Array<any>;

  constructor(private dataService: DataService) { }

  getReserves() : void {
    this.dataService.getReserves()
      .subscribe(reserves => this.reserves = reserves);
  }

ngOnInit() {

      this.getReserves();
      // this.moveData();
  }

  makeStarter( data, i): void {
    this.dataService.addToStarter(data)

    // this.players.splice(i, 1);

}
}

我想簡單地單擊html中的按鈕以將選定的播放器移動到同級組件。 我在如何構造服務/可觀察對象等方面遇到了麻煩，因為這是我第一次使用Angular。

Answer 1

我有一點空閑時間...所以我將您的示例代碼移到這里的stackblitz上： https ://stackblitz.com/edit/angular-j2l8pq

我不確定您到底想完成什么，但是試圖基本回答您的問題。

一些關鍵的事情：

1）我假設長凳和玩家數組都必須為Player類型。 這樣，您就可以在兩個數組之間移動相同類型的項目，而不會損失任何屬性。

2）我將組件中的屬性更改為吸氣劑。 這樣，它將始終從服務中獲取當前值：

  get players(): Player[] {
    return this.dataService.players;
  }
  get bench(): Player[] {
    return this.dataService.bench;
  }

3）您似乎不需要Subject / BehaviorSubject，所以我刪除了導入。

我不確定您指的是“兄弟組件”。 但是，如果您創建了與同一服務對話的另一個組件，則該組件還具有如上所述的吸氣劑，它將與播放器組件共享相同的數據。

希望所提供的代碼為您回答問題提供基本指導。

零件

import { Component, OnInit } from "@angular/core";
import { DataService } from './player.service'
import { Player } from "./player";

@Component({
  selector: 'app-roster-box',
  template: 
    `<div>Current Roster</div>
    <li *ngFor="let player of players" (click)="moveToBench(player)">
      {{ player.name }}
    </li>
    <br>
    <div>Bench</div>
    <li *ngFor="let player of bench">
      {{ player.name }}
    </li>
    `
})
export class RosterBoxComponent implements OnInit {
  moves: number = 5;
  btnText: string = "Move to Bench";

  get players(): Player[] {
    return this.dataService.players;
  }
  get bench(): Player[] {
    return this.dataService.bench;
  }

  constructor(public dataService: DataService) {}

  getPlayers() : void {
    this.dataService.getPlayers()
      .subscribe();
  }

  ngOnInit() {
      this.getPlayers();
  }

  moveToBench( player ): void {
    console.log(player);
    this.dataService.addToReserves(player)
  }

}

服務

import { Injectable } from "@angular/core";
import { Player } from "./player";
import { Observable } from "rxjs/Observable";
import { of } from "rxjs/observable/of";

@Injectable()
export class DataService {

   players: Player[] = [];
   bench: Player[] = [];

    constructor() {}

    getPlayers(): Observable<Player[]> {
    this.players = [
            {
              index: 1,
              photo: "../../assets/images/lonzo.jpeg",
              name: "Lonzo Ball",
              position: "G",
              moves: 5
            },
            {
              index: 2,
              photo: "../../assets/images/Brook.jpeg",
              name: "Brook Lopez",
              position: "C",
              moves: 5
            }
          ]
      return of(this.players);
    }

    getReserves(): Observable<Player[]> {
      return of(this.bench);
    }

  addToReserves(player: Player) {
    this.bench.push(player);
    const index = this.players.indexOf(player);
    if (index > -1)
      this.players.splice(index, 1);
  }

  addToStarter(data) {
    this.players.push(data)
  }

}