ajouter une liste de composants dynamiques dans blazor

asp.net-core blazor c#

Question

Je viens juste de commencer à regarder dans blazor (v0.3) et à faire quelques tests, je voulais ajouter une liste en utilisant blazor

J'ai d'abord créé une List<string> pour tester une simple liste dans la même page

<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 = "";
    }

}

cela fonctionne bien, ajoute chaque élément à la liste lorsque je l’ajoute. mais ensuite, j'ai essayé d'ajouter des composants, ajouter un seul composant était facile, basé sur cette question ici mais pour une liste, j'avais le problème suivant:

  • J'ai créé un composant <li> juste pour tester la fonctionnalité des composants, voici la vue des composants
<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 = "";
    }

}
  • puis dans la vue parent
<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 = "";
    }

}

quand je charge le premier élément est chargé correctement: entrez la description de l'image ici

mais quand je suis entré dans le second, ils sont tous remplacés par le dernier:

entrez la description de l'image ici

Une idée de ce qui se passe?

Réponse populaire

Cela est dû au fait que TxtExample est global pour le composant. Lorsque Blazor détecte une modification potentielle de l'interface utilisateur, il recalcule le composant entier et met à jour le DOM avec les différences éventuelles. Ainsi, lorsque vous modifiez la zone de texte, TxtExample est mis à jour, puis le rasoir recalcule en insérant la nouvelle valeur de TxtExample pour toutes les lignes.




Sous licence: CC-BY-SA with attribution
Non affilié à Stack Overflow
Est-ce KB légal? Oui, apprenez pourquoi
Sous licence: CC-BY-SA with attribution
Non affilié à Stack Overflow
Est-ce KB légal? Oui, apprenez pourquoi