Page 34 - Revista_60.pub
P. 34
A PROGRAMAR
ASP.NET CORE, ANGULAR 5 - CRUD COM ENTITY FRAMEWORK
De seguida abrimos o ficheiro fetchEdicao.component.html e
colocamos o seguinte código: @Component({
templateUrl: './AddEdicao.component.html'
})
<!DOCTYPE html>
<html> export class createedicao implements OnInit {
<head> employeeForm: FormGroup;
<meta charset="utf-8" /> title: string = "Create";
<title></title> employeeId: number;
</head> errorMessage: any;
<body> cityList: Array<any> = [];
<h1>Edicao Data</h1>
constructor(private _fb: FormBuilder, private
<p>Este componente mostra os dados de uma edição _avRoute: ActivatedRoute,
vindos do servidor.</p> private _edicaoService: EdicaoService,
private _router: Router) {
<p *ngIf="!ediList"><em>Carregando...</em></p> if (this._avRoute.snapshot.params["id"]) {
this.edicaoId =
<p> this._avRoute.snapshot.params["id"];
<a [routerLink]="['/register-edicao']">Criar }
Nova</a>
</p> this.edicaoForm = this._fb.group({
edicaoId: 0,
<table class='table' *ngIf="ediList"> temaCapa: ['', [Validators.required]],
<thead> ano: ['', [Validators.required]],
<tr> mes: ['', [Validators.required]]
<th>EdicaoId</th> })
<th>Tema de Capa</th> }
<th>Ano</th>
<th>Mes</th> ngOnInit() {
</tr>
</thead> this._edicaoService.getAnoList().subscribe(
<tbody> data => this.anoList = data
<tr *ngFor="let edi of ediList"> )
<td>{{ edi.edicaoId }}</td>
<td>{{ edi.temaCapa }}</td> if (this.edicaoId > 0) {
<td>{{ edi.ano }}</td> this.title = "Editar";
<td>{{ edi.mes }}</td> this._edicaoService.getEdicaoById
<td> (this.edicaoId)
<td> .subscribe(resp =>
<a [routerLink]="['/edicao/edit/', this.edicaoForm.setValue(resp)
edi.edicaoId]">Edit</a> | , error => this.errorMessage = error);
<a [routerLink]="" (click)="delete }
(edi.edicaoId)">Delete</a>
</td> }
</tr>
</tbody> save() {
</table>
</body> if (!this.edicaoForm.valid) {
</html> return;
}
Feito o código HTML para o nosso template do compo- if (this.title == "Criar") {
nente FetchEdicao, vamos ao componente AddEdicao. De this._edicaoService.saveEdicao
alertar que além do HTML comum, é usado um loop ngFor, do (this.edicaoForm.value)
Angular, pelo que se o leitor não estiver confortável com Angu- .subscribe((data) => {
this._router.navigate(['/fetch-
lar, recomenda-se uma visita à documentação oficial. edicao']);
}, error => this.errorMessage = error)
Repetimos o procedimento feito anteriormente para }
adicionar o componente, mas desta vez, chamamos-lhe Adde- else if (this.title == "Editar") {
dicao.component.ts e colocamos o seguinte código dentro de- this._edicaoService.updateEdicao
le. (this.edicaoForm.value)
.subscribe((data) => {
//teste this._router.navigate(['/fetch-
import { Component, OnInit } from '@angular/core'; edicao']);
import { Http, Headers } from '@angular/http'; }, error => this.errorMessage = error)
import { NgForm, FormBuilder, FormGroup, }
Validators, FormControl } from '@angular/forms'; }
import { Router, ActivatedRoute } from '@angular/
router'; cancel() {
import { FetchEdicaoComponent } from '../ this._router.navigate(['/fetch-edicao']);
fetchEdicao/fetchedicao.component'; }
import { EdicaoService } from '../../services/
ediservice.service'; get temaCapa() { return this.edicaoForm.get
('temaCapa'); }
34
