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:
<li>
juste pour tester la fonctionnalité des composants, voici la vue des composants <li id="@ID"> @Text </li> @functions { [Parameter] string Text { get; set; } [Parameter] string ID { get; set; } }
<input type="text" bind="TxtExample" name="inpAdd"/> <button onclick="@addCompoment">add comp1</button> <div class="simple-list-list">
@if (!componentListTest.Any())
{
<p>You have no items in your list</p>
}
else
{
<ul>
@foreach (var item in componentListTest)
{
@item
}
</ul>
}
</div>
@functions {
private List<RenderFragment> componentListTest { get; set; }
private int currentCount {get; set;}
private string TxtExample { get; set; }
protected override void OnInit()
{
currentCount = 0;
componentListTest = new List<RenderFragment>();
}
protected void addCompoment()
{
componentListTest.Add(CreateDynamicComponent(currentCount));
currentCount++;
}
RenderFragment CreateDynamicComponent(int counter) => builder =>
{
var seq = 0;
builder.OpenComponent(seq, typeof(listExample));
builder.AddAttribute(++seq, "Text", "text -- "+TxtExample);
builder.AddAttribute(++seq, "id","listed-"+counter);
builder.CloseComponent();
};
}
quand je charge le premier élément est chargé correctement:
mais quand je suis entré dans le second, ils sont tous remplacés par le dernier:
Une idée de ce qui se passe?
Vous le rendez trop compliqué. Vous n'avez pas besoin d'instancier dynamiquement des composants pour que ce scénario fonctionne.
Vous pouvez simplement faire:
<ul>
@foreach (var item in listItems)
{
<myComponent bind-myVar="@item"></myComponent>
}
</ul>
Et les composants seront instanciés pour vous.
Voir également ici comment faire fonctionner les paramètres sur votre composant.