app.component.ts
export class AppComponent {
title = 'proyecto002 - listado de frutas';
art={
codigo:null,
descripcion:null,
precio:null }
articulos = [{codigo:1, descripcion:'papas', precio:'10.50'},
{codigo:2, descripcion:'manzanas', precio:'20.50'},
{codigo:3, descripcion:'melon', precio:'50'},
{codigo:4, descripcion:'cebollas', precio:'17'},
{codigo:5, descripcion:'calabaza', precio:'20'},
];
hayRegistros(){
return this.articulos.length>0; }
borrar(art) {
for(let x=0;x<this.articulos.length;x++)
if (this.articulos[x].codigo==art.codigo)
{
this.articulos.splice(x,1);
return;
} }
agregar(){
for(let x=0;x<this.articulos.length;x++)
if (this.articulos[x].codigo==this.art.codigo)
{ alert('ya existe un articulo con ese codigo');
return; }
this.articulos.push({codigo:this.art.codigo,
descripcion:this.art.descripcion,
precio:this.art.precio });
this.art.codigo=null;
this.art.descripcion=null;
this.art.precio=null; }
seleccionar(art){
this.art.codigo=art.codigo;
this.art.descripcion=art.descripcion;
this.art.precio=art.precio; }
modificar(){
for(let x=0;x<this.articulos.length;x++)
if (this.articulos[x].codigo==this.art.codigo) {
this.articulos[x].descripcion=this.art.descripcion;
this.articulos[x].precio=this.art.precio;
return; } alert('no existe el codigo de articulo ingresado'); } }
<div>
<h1>{{title}}</h1>
<table border="1" *ngIf="hayRegistros(); else sinarticulos">
<tr>
<td>Codigo</td><td>Descripcion</td><td>Precio</td><td>Borrar</td><td>Seleccionar</td>
</tr>
<tr *ngFor="let art of articulos">
<td>{{art.codigo}}</td>
<td>{{art.descripcion}}</td>
<td>{{art.precio}}</td>
<td><button (click)="borrar(art) ">Borrar?</button></td>
<td><button (click)="seleccionar(art) ">Seleccionar</button></td>
</tr>
</table>
<ng-template #sinarticulos><p>No hay articulos.</p></ng-template>
<div>
<p>
Codigo:<input type="number" [(ngModel)]="art.codigo" />
</p>
<p>
Descripcion:<input type="text" [(ngModel)]="art.descripcion" />
</p>
<p>
Precio:<input type="numbre" [(ngModel)]="art.precio" />
</p>
<p><button (click)="agregar()">Agregar</button>
<button (click)="modificar()">Modificar</button></p>
</div>
</div>
