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: 
pero cuando entré en el segundo, todos ellos son reemplazados por el último:
¿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.