[info] Objetivos do capítulo:
- demonstrar a implementação do requisito "Excluir uma disciplina"
Branch: livro-excluindo-disciplina
Este é um capítulo mais simples. Basicamente os recursos utilizados já foram apresentados, então ele é mais curto.
Primeiro, um trecho do Controller do AppComponent
:
...
export class AppComponent {
selecionado = null;
nome = null;
descricao = null;
disciplinas = [
new Disciplina('Língua Portuguesa', '...'),
...
];
salvar() {
...
}
excluir(disciplina) {
if (confirm('Tem certeza que deseja excluir a disciplina "'
+ disciplina.nome + '"?')) {
const i = this.disciplinas.indexOf(disciplina);
this.disciplinas.splice(i, 1);
}
}
}
Com exceção do código omitido, que você já conheceu nos capítulos anteriores, o método excluir()
recebe como parâmetro um objeto, chamado disciplina
. Esse método exclui uma disciplina da lista, mas, antes, solicita uma confirmação do usuário (por isso está usando a função confirm()
). Se o usuário confirmar que deseja excluir a disciplina, então o código prossegue:
- encontra o índice da disciplina na lista usando o método
indexOf()
- remove um elemento da lista usando o método
splice()
Agora, então, um trecho do código do Template:
<h1>Disciplinas</h1>
<hr>
<ul>
<li *ngFor="let disciplina of disciplinas">
{{disciplina.nome}}
<button (click)="excluir(disciplina)">
Excluir
</button>
</li>
</ul>
<h2>Cadastrar</h2>
<p>Use este formulário para cadastrar uma disciplina.</p>
<form #cadastro="ngForm" (submit)="salvar()">
...
</form>
A parte importante do template é o elemento button
ao lado do nome da disciplina. Há um tratador do evento (click)
que chama o método excluir()
passando como parâmetro a disciplina
atual da repetição do *ngFor
.
O resultado da execução do software no browser é ilustrado pela figura a seguir.
Esse capitulo é bem curto e não há muito o que resumir, mas é bom notar que os conceitos vistos nos capítulos anteriores continuam funcionando aqui, mesmo que em aplicações diferentes.