Component lista-eventi spiegazione

Component lista-eventi spiegazione

Come cooperano le due parti principali di  lista-eventi.component (Gli omonimi file .ts e .html)?

Nel file lista-eventi.component.ts …

vengono effettuale le elaborazioni eventualmente necessarie e le valorizzate delle variabili. Nel caso specifico le seguenti: displayedColumns: l’ array delle colonne da visualizzare nella tabella.

datiListaEventi: l’array di tutti gli oggetti JSON che identificano ciascun evento.

...
 
export class ListaEventiComponent implements OnInit {
 
  datiListaEventi = [
    {"id":13,"name":"Swing Fastival","when":"November 2019",
    "country":" United Kingdom","town":" Torquay, Devon ","site2":"http://www.swingfastival.co.uk","styles":" Balboa, Shag",
    "startdate":"2019-11-08","stopdate":"2019-11-10"},
 
... etc etc ...
 
    "styles":" Lindy Hop","startdate":"2020-08-28","stopdate":"2020-09-05"},
    {"id":226,"name":"Madrid in Pulse","when":"September 2020",
    "country":" Spain","town":" Madrid","site2":"http://www.madridinpulse.es/?lang=en","styles":" Balboa",
    "startdate":"2020-09-04","stopdate":"2020-09-06"}
    ];
 
    displayedColumns: string[] = ['evento', 'luogo' , 'balli', 'inizio', 'fine'];
 
    constructor() { ...}
 
...

 

Per capire meglio la variabile JSON degli eventi, vediamola con la giusta indentazione:

   
      "id":13,
      "name":"Swing Fastival",
      "when":"November 2019",
      "country":" United Kingdom",
      "town":" Torquay, Devon ",
      "site2":"http://www.swingfastival.co.uk",
      "styles":" Balboa, Shag",
      "startdate":"2019-11-08",
      "stopdate":"2019-11-10"
   },
   
      "id":14,
      "name":"Boulevard Blues",
      "when":"November 2019",
      "country":" Belgium",
      "town":" Hasselt",
      "site2":"www.boulevardblues.be",
      "styles":" Blues",
      "startdate":"2019-11-08",
      "stopdate":"2019-11-11"
   },
   ... etc etc ...
]

Nel file lista-eventi.component.html

recuperiamo il contenuto della variabile datiListaEventi e displayedColumns e presentato in output attraverso la sintassi dell’html e della libreria material:

  • mat-table [dataSource]
  • mat-header-row *matHeaderRowDef

Seguiamo attraverso le differenti colorature, come le variabili definite nel file .ts e in JSON vengono recuperate nell’.html.


  <div class="inner-list">

      <table mat-table [dataSource]="datiListaEventi" class="event-table"
             matSort matSortActive="startdate" matSortDisableClear matSortDirection="asc">

        <ng-container matColumnDef="evento">
          <th  mat-header-cell  *matHeaderCellDef>Evento</th>
          <td mat-cell *matCellDef="let row">{{row.name}}</td>
        </ng-container>

        <ng-container matColumnDef="luogo">
          <th mat-header-cell *matHeaderCellDef>Luogo</th>
          <td mat-cell *matCellDef="let row">{{row.country}} / {{row.town}}</td>
        </ng-container>

        <ng-container matColumnDef="balli">
          <th mat-header-cell *matHeaderCellDef>Balli</th>
          <td mat-cell *matCellDef="let row">{{row.styles}}</td>
        </ng-container>

        <ng-container matColumnDef="inizio">
          <th mat-header-cell *matHeaderCellDef>Inizio</th>
          <td mat-cell *matCellDef="let row">{{row.startdate}}</td>
        </ng-container>

        <ng-container matColumnDef="fine">
          <th mat-header-cell *matHeaderCellDef>Fine</th>
          <td mat-cell *matCellDef="let row">{{row.stopdate}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>

Debug e Commenti nel codice

Nel costruttore ci sono due parti molto interessanti da analizzare. In questo contesto specifico non sono obbligatorie, anzi si potrebbero omettere e il funzionamento dell’applicazione non cambierebbe, ma sono molto utili in prospettiva al momento dello sviluppo e debug del codice. Vediamole.

Il Debug

Quando vogliamo capire se il flusso dell’applicazione entra in un certo metodo, oppure vogliamo conoscere il valore di una data variabile è sufficiente introdurre nel codice l’istruzione console.log() e l’argomento di questa funzione verrà scritto nella console del nostro browser. Ogni browser ha le proprie istruzioni per aprire la console. Si assomigliano però un po’ tutti. Ad esempio in Chrome bisogna selezionare il menù in alto a destra coi 3 puntini. Poi “Altri strumenti” e “Strumenti per sviluppatori (o “More tools” e “Developer tools”). Nella nuova schermata, selezionare in alto “Console”.

I Commenti al codice

In Angular, ovvero in TypeScript, come in JavaScript, per commentare il codice si deve “circondarlo” dalla coppia di caratteri /* e i due caratteri */ , oppure mettere a inizio della singola riga i caratteri // .

No Comments

Sorry, the comment form is closed at this time.