añadir lista de componentes dinámicos en blazor

asp.net-core blazor c#

Pregunta

Acabo de comenzar a echar un vistazo a blazor (v0.3) y hacer algunas pruebas. Quería agregar una lista usando blazor.

Primero creé una List<string> para probar una lista simple en la misma página

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

}

esto funciona bien, está agregando cada elemento a la lista cuando lo agrego. pero luego, traté de agregar componentes, agregar un solo componente fue fácil, basado en esta pregunta aquí, pero para una lista tuve el siguiente problema:

  • Creé un componente <li> solo para probar la funcionalidad de los componentes, aquí está la vista de componentes
<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 = "";
    }

}
  • luego en la vista principal
<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 = "";
    }

}

Cuando carga el primer elemento se carga correctamente: introduzca la descripción de la imagen aquí

pero cuando entré en el segundo, todos ellos son reemplazados por el último:

introduzca la descripción de la imagen aquí

¿Tienes idea de lo que está pasando?

Respuesta popular

Esto se debe a que TxtExample es global para el componente. Cuando Blazor detecta un posible cambio en la interfaz de usuario, vuelve a calcular todo el componente y actualiza el DOM con cualquier diferencia. Entonces, cuando cambias el cuadro de texto, TxtExample se actualiza y luego Razor se está recalculando, insertando el nuevo valor de TxtExample para todas las filas.




Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
¿Es esto KB legal? Sí, aprende por qué
Licencia bajo: CC-BY-SA with attribution
No afiliado con Stack Overflow
¿Es esto KB legal? Sí, aprende por qué