Nascondi / mostra singoli elementi all’interno di nFor

Devo mostrare / hide parte del componente. Ecco l’esempio di Angular2.

  • Click
    Hide
  • Supponiamo di avere solo 2 oggetti. Problema qui che funziona su entrambi gli elementi. Quindi nasconde e mostra la parte div in entrambi i componenti. Potrebbe essere perfetto se potessimo avere qualcosa del genere:

     
  • Click
    Hide
  • Quindi c’è un modo semplice per risolvere questo problema?

    La hideme variabile hideme è globale. Forse potresti allegarlo all’elemento corrente:

     
  • Click
    Hide
  • Altrimenti è necessario utilizzare un object object dedicato dal componente. Ecco un esempio:

     
  • Click
    Hide
  • Non dimenticare di inizializzare l’object hideme questo modo nel tuo componente:

     hideme: = {}; 

    modificare

    Se vuoi fare in modo che funzioni come tabs, hai bisogno di un po ‘più di lavoro 😉

     
  • Click
    Hide
  • E per visualizzare l’elemento cliccato e hide gli altri:

     onClick(item) { Object.keys(this.hideme).forEach(h => { this.hideme[h] = false; }); this.hideme[item.id] = true; } 

    è lavoro per me:

    nel tuo deco compoment su hideme come array

     hideme=[] 

    e nel ngPer farlo:

     
  • show/hide
    The content will show/hide
  • Ecco un esempio che mostra un segno più quando l’elemento genitore è compresso e passa a un segno meno quando è espanso e mostra un elenco di elementi che appartengono alla categoria cliccata. (Nel tuo caso, questo sarebbe il div che contiene le cose che vuoi mostrare e hide invece di una lista.)

    L’ho raggiunto utilizzando i dettagli e gli elementi di riepilogo invece della fisarmonica. Questi elementi sono costruiti appositamente per questo caso d’uso.

    Utilizzando il problema presentato in questo thread: angular2 triggers e distriggers le icone all’interno di ngFor

    Ecco gli screenshot di ciò che la categoria compresso e espansa assomiglia a:

    Categoria comprata con segno più

    Categoria espansa con segno meno

    Questo è il modello:

     
    • {{ category.name }}
      • {{ item }}

    Sto usando Font Awesome per le icone più e meno ed ecco come triggersrli. Nel tuo css, aggiungi i seguenti stili:

    (Sto facendo riferimento all’icona con la class che ho assegnato ma puoi anche fare un riepilogo dei dettagli i: before e dettagli [apri] riepilogo i: before)

     details summary .expand-icon:before { content: "\f055"; } details[open] summary .expand-icon:before { content: "\f056"; } 

    Nota: sto utilizzando un tema Bootstrap per gli screenshot ma ho spogliato i nomi delle classi sugli elementi per non ingombrare la risposta.

    In HTML: (clic) = “onClick ($ evento)”

    All’interno della funzione onClick, puoi prendere l’evento e usarlo come un object jQuery, come questo:

     onClick(event){ $(event.target).siblings('div').toggle(500); } 

    In questo esempio, cerco il fratello del mio object di destinazione, puoi farlo con qualsiasi object di cui hai bisogno.

    Nella class componente, dichiarare la variabile hideme (typescript):

     export class MyPage{ hideme = {}; constructor(){ this.hideme = {}; // init is required } ... 

    Mostra / nascondi il controllo nel modello:

     
  • show/hide
    The content will show/hide
  • Note: hideme non è richiesto init perché hideme[item.id] undefined è undefined così !hideme[item.id] sarà true .