[英]Move object from one component to a sibling component in Angular5
I am working on a listing application that transfers an object from one component to an Identical sibling component. 我正在开发一个清单应用程序,该应用程序将一个对象从一个组件转移到同一个同级组件。 I'd also like to decrease the moves property by 1 with each move.
我还想将每一步的moves属性减少1。 I am having trouble with the actually pushing the selected item into the sibling array.
我在将所选项目实际推入同级数组时遇到了麻烦。
Here's a sample of my data... 这是我的数据示例...
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
},
This is what I have in the services file... 这就是我在服务文件中所拥有的...
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() {}
}
This is what I have in the starters.ts file... 这就是我在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);
}
}
And finally the code for the bench.ts file... 最后是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);
}
}
I am looking to simply click a button in html to move the selected player to the sibling component. 我想简单地单击html中的按钮以将选定的播放器移动到同级组件。 I am having trouble with how to structure the services/observable etc as this is my first time working with Angular.
我在如何构造服务/可观察对象等方面遇到了麻烦,因为这是我第一次使用Angular。
I had a little free time ... so I moved your sample code to a stackblitz here: https://stackblitz.com/edit/angular-j2l8pq 我有一点空闲时间...所以我将您的示例代码移到这里的stackblitz上: https ://stackblitz.com/edit/angular-j2l8pq
I was not sure exactly what you were trying to accomplish, but tried to basically answer your question. 我不确定您到底想完成什么,但是试图基本回答您的问题。
A few key things: 一些关键的事情:
1) I assumed that the bench and the players arrays both needed to be of type Player
. 1)我假设长凳和玩家数组都必须为
Player
类型。 That allows you to move items of the same type between the two arrays without any loss of properties. 这样,您就可以在两个数组之间移动相同类型的项目,而不会损失任何属性。
2) I changed the property in the component to be a getter. 2)我将组件中的属性更改为吸气剂。 That way it would always get the current value from the service:
这样,它将始终从服务中获取当前值:
get players(): Player[] {
return this.dataService.players;
}
get bench(): Player[] {
return this.dataService.bench;
}
3) You did not seem to need a Subject/BehaviorSubject so I removed the imports. 3)您似乎不需要Subject / BehaviorSubject,所以我删除了导入。
I was not sure what "sibling component" you were referring to. 我不确定您指的是“兄弟组件”。 But if you create another component that talks to the same service, if it also has a getter as shown above it will share the same data as the player component.
但是,如果您创建了与同一服务对话的另一个组件,则该组件还具有如上所述的吸气剂,它将与播放器组件共享相同的数据。
Hopefully the provided code provides the basic direction for you to answer your question. 希望所提供的代码为您回答问题提供基本指导。
Component 零件
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)
}
}
Service 服务
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)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.