aggiungi un elenco di componenti dinamici in blazer

asp.net-core blazor c#

Domanda

Ho appena iniziato a dare un'occhiata in blazor (v0.3) e facendo qualche test ho voluto aggiungere un elenco usando il blazor

Per prima cosa ho creato una List<string> per testare un semplice elenco nella stessa pagina

<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}

questo sta funzionando bene, sta aggiungendo ogni elemento alla lista quando lo aggiungo. ma poi, ho provato ad aggiungere componenti, aggiungere un singolo componente è stato facile, basato su questa domanda qui ma per un elenco ho avuto il prossimo problema:

  • Ho creato un <li> compontent solo per testare la funzionalità dei componenti, ecco la vista del componente
<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}
  • quindi nella vista genitore
<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}
<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}

quando carico l'elemento pugno è caricato correttamente: inserisci la descrizione dell'immagine qui

ma quando ho inserito il secondo, tutti sono stati sostituiti per l'ultimo:

inserisci la descrizione dell'immagine qui

Qualche idea che sta succedendo?

Risposta popolare

Questo perché TxtExample è globale per il componente. Quando Blazor rileva una potenziale modifica dell'interfaccia utente, ricalcola l'intero componente e aggiorna il DOM con qualsiasi differenza. Quindi, quando cambi la casella di testo, TxtExample viene aggiornato e quindi il Razor ricalcola, inserendo il nuovo valore di TxtExample per tutte le righe.




Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché
Autorizzato sotto: CC-BY-SA with attribution
Non affiliato con Stack Overflow
È legale questo KB? Sì, impara il perché