Con un ciclo for creo la tabella prendendo i valori dalla lista configurata nel file ts. Quando clicco su una riga la funzione onClick($index) memorizza il numero della riga cliccata, abilita il pulsante di cancellazione e visualizza i dati selezionati.
Lo stesso ciclo for colora lo sfondo della tabella e se è stata cliccata una riga, quindi si trova memorizzato il suo numero, questa viene colorata diversamente. E' stata applicata la direttiva appSfondoverde configurata in direttive.
Il pulsante Cancella Selezionato elimina i valori selezionati dalla lista tramite il metodo splice(), cancella i dati visualizzati, mette fuori range il valore della riga così che non ne venga colorata nessuna come selezionata, e si disabilita.
Il pulsante Aggiungi Luca aggiunge Luca Neri alla lista.
| Nome | Cognome |
|---|---|
| Paolo | Rossi |
| Paolino | Rossino |
| Paolone | Rossone |
Evidenziato:
Nella direttiva appSfondoverde è stata inserita l'istruzione
this.cella.val_cella = this.el.nativeElement.innerHTML che assegna il valore della variabile val_cella che si trova in servizio.service che viene poi letto da file html dal tag p . ( cella che si trova subito prima di della variabile val_cella serve per indicare che la variabile si trova in servizio.service come configurato nel constructor del file ts .)