EDIT:
Ok, credo di aver capito. This tutorial mi ha aiutato molto, quindi consiglierei di leggerlo anche.
Ho diviso il mio codice fino in componenti, dove
@Component({
directives: [DataCards],
templateUrl: 'build/pages/data-list/data-list.html'
})
export class DataList {
public dataList: Data[];
constructor() {
this.dataList = [
new Data('Test title', 'Test Details 1, 2, 3, 4, 5', false),
new Data('Second title', 'These are the details for my second title :)', false)
];
}
}
e il corrispondente codice HTML
<ion-content class="cards-bg">
<data-cards [data]="dataList"></data-cards>
</ion-content>
contenere la mia componente personalizzato data-cards
. data-cards
ha un parametro di input data
, attraverso il quale viene passato l'elenco dei dati. Per poter utilizzare il componente data-cards
, è necessario impostare l'attributo directives
. Data
è una classe che contiene tutto ciò di cui hai bisogno in una voce del tuo elenco.
export class Data {
constructor(public title: string, public details: string, public showDetails: boolean) {}
}
Il componente data-cards
sé ha il selettore ed ingressi attributi impostati, in modo che il componente può essere utilizzato dal data-list
HTML. La funzione toggleDetails
viene utilizzata per attivare o disattivare la parte di dettaglio di una voce di elenco.
@Component({
selector: 'data-cards',
inputs: ['data'],
templateUrl: 'build/pages/data-cards/data-cards.html'
})
export class DataCards {
public data: Data[];
constructor() {}
toggleDetails(data: Data) {
if (data.showDetails) {
data.showDetails = false;
} else {
data.showDetails = true;
}
}
}
Infine, nel file data-cards
modello, costruisco la lista dei dati utilizzando *ngFor
e diffondono i dati di visibilità <div>
dell'elemento dipende dati showDetails
attributo con *ngIf
.
<ion-card *ngFor="let d of data">
<h1>{{d.title}}</h1>
<button (click)="toggleDetails(d)">+</button>
<div *ngIf="d.showDetails">{{d.details}}</div>
</ion-card>
Per far funzionare tutto è necessario aggiungere alcune importazioni al mio codice, poiché ad es. la classe DataList
dipende da DataCards
e Data
.
Consiglio anche cambiare lo stile del modello data-cards
... Senza essere in stile, non sembra esattamente bella :)
INEDITA RISPOSTA ORIGINALE:
sto lavorando a qualcosa simile ora. Penso che questo possa essere implementato usando le carte e *ngIf
.
Così penso di fare qualcosa di simile
<ion-card>
<h2>Card Title</h2>
<button (click)="toggleDetails()">+</button>
<div *ngIf="showDetails">
Here are some details for the title.
</div>
</ion-card>
Nel toggleDetails()
vorrei impostare la variabile showDetails
true ...
Questo è solo il mio approccio (e non testato), ho intenzione di modificare la mia risposta quando ho finito di implementarlo.
Potete per favore condividere con noi cosa avete provato finora? – sebaferreras
voglio creare un elenco di fisarmoniche come questo [screenshot] (https://s31.postimg.org/jzd2yzp7f/accordion.jpg) – mahmoudismail