将对象从一个组件移动到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)
  }

}