Witam.
Jestem początkujący w angularze. Postanowiłem pobawić się trochę serwisami restowymi i pobieraniem danych z HTTP, wykorzystałem do tego in-memory-web-api.
Wszystko działa, tylko mam jeden problem. Mianowicie chcę by funkcja upperCase() zamiast w app.component.ts była w pliku player.ts (jest ona wywoływana za pomocą eventu (click) w buttonie). Próbowałem już różnych sposobów jednak jak narazie nic nie wyszło.
Dlatego proszę was o pomoc, z góry dziękuję.
PROJEKT:
app.component.ts
import { Component, OnInit } from '@angular/core';
import { PlayerService } from './player.service';
import { PlayerNationality } from './player';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private playerService: PlayerService) {}
players: PlayerNationality[];
formPlayer: PlayerNationality;
showForm: boolean;
newForm: boolean;
ngOnInit(): void {
this.getPlayers();
}
getPlayers(): void {
this.playerService.getPlayer().subscribe(players => this.players = players);
}
addOrUpdatePlayer(player: PlayerNationality) {
if(this.newForm) {
this.playerService.addPlayer(player).subscribe(add => this.players.push(add));
}
else {
this.playerService.updatePlayer(player).subscribe(() => {});
}
this.newForm = false;
this.hidePlayerForm();
}
deletePlayer(player: PlayerNationality) {
this.playerService.deletePlayer(player).subscribe(() => this.deletePlayerFromList(player));
}
deletePlayerFromList(player: PlayerNationality) {
const index = this.players.indexOf(player, 0)
if(index > -1) {
this.players.splice(index, 1);
}
}
/* upperCase(player: PlayerNationality) {
player.name = player.name.toUpperCase();
player.last = player.last.toUpperCase();
player.nationality = player.nationality.toUpperCase();
console.log(player);
} */
playerChange(player) {
player.name = player.last;
player.last = player.nationality;
}
showPlayerForm(player: PlayerNationality) {
if(!player) {
player = new PlayerNationality()
this.showForm = true;
this.newForm = true;
}
this.showForm = true;
this.formPlayer = player;
}
hidePlayerForm() {
this.showForm = false;
}
upperCase(player) {
player.upperCase();
}
}
player-data.ts
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { PlayerNationality } from './player';
export class PlayerNationalityData implements InMemoryDbService {
createDb() {
const players = [
{id: 1, name: 'Joseph', last: 'Dean', nationality: 'Russia'},
{id: 2, name: 'Joseph', last: 'Dean', nationality: 'Russia'},
{id: 3, name: 'Joseph', last: 'Dean', nationality: 'Russia'}
];
return {players};
}
}
player.ts
export class PlayerNationality {
id: number;
name: String;
last: String;
nationality: String;
public upperCase(){
this.name = this.name.toUpperCase();
this.last = this.last.toUpperCase();
this.nationality = this.nationality.toUpperCase();
}
}
player-service.ts
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { PlayerNationality } from './player';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { PlayerNationalityData } from './player-data';
@Injectable()
export class PlayerService {
constructor(private http: Http) {}
private url = 'app/players';
private headers = new Headers({'Content-Type': 'application/json'})
private options = new RequestOptions({ headers: this.headers });
getPlayer(): Observable<PlayerNationality[]> {
return this.http.get(this.url).map(response => response.json());
}
addPlayer(player: PlayerNationality): Observable<PlayerNationality> {
return this.http.post(this.url, player, this.options).map(response => response.json());
}
updatePlayer(player: PlayerNationality): Observable<any> {
const updateUrl = `${this.url}/${player.id}`
return this.http.put(updateUrl, player, this.options).map(response => response.json());
}
deletePlayer(player: PlayerNationality): Observable<any> {
const deleteUrl = `${this.url}/${player.id}`
return this.http.delete(deleteUrl).map(response => response.json());
}
}
app.component.html
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Last Name</th>
<th scope="col">Nationality</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let player of players">
<th scope="row">{{player.id}}</th>
<td>{{player.name}}</td>
<td>{{player.last}}</td>
<td>{{player.nationality}}</td>
<td>
<button (click)="showPlayerForm(player)" type="button" class="btn btn-info">Edytuj</button>
<button (click)="upperCase(player)" type="button" class="btn btn-primary">UpperCase</button>
<button (click)="playerChange(player)" type="button" class="btn btn-primary">Zamiana</button>
<button (click)="deletePlayer(player)" type="button" class="btn btn-danger">Usun</button>
</td>
</tr>
</tbody>
</table>
<div class="row">
<button style="margin-left: 2em" class="btn btn-success" (click)="showPlayerForm()" name="showPlayerForm">Dodaj</button>
<button *ngIf="showForm" style="margin-left: 2em" class="btn btn-success" (click)="hidePlayerForm()" name="hidePlayerForm">Chowaj</button>
</div>
<br>
<br>
<form *ngIf="showForm" style="margin-left: 2em">
Name:
<input type="text" class="form-control col-sm-3" name="firstName" [(ngModel)]="formPlayer.name">
<br> Last Name:
<input type="text" class="form-control col-sm-3" name="lastName" [(ngModel)]="formPlayer.last">
<br> Nationality:
<input type="text" class="form-control col-sm-3" name="nationality" [(ngModel)]="formPlayer.nationality">
<br>
<button (click)="addOrUpdatePlayer(formPlayer)" type="button" class="btn btn-primary row" style="margin-right: 2em">Zapisz</button>
</form>
Jeszcze raz z góry dziękuję za pomoc.
