Ich habe gerade angefangen, blazor (v0.3) anzuschauen und einen Test zu machen. Ich wollte eine Liste mit blazor hinzufügen
Zuerst habe ich eine List<string>
, um eine einfache Liste auf derselben Seite zu testen
<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 = "";
}
}
Das funktioniert einwandfrei. Ich füge jedes Element zur Liste hinzu, wenn ich es hinzufüge. Aber dann habe ich versucht, Komponenten hinzuzufügen, fügen Sie eine einzelne Komponente war einfach, basierend auf dieser Frage hier, aber für eine Liste hatte ich das nächste Problem:
<li>
-Komponente erstellt, um die Funktionalität von Komponenten zu testen, hier ist die Komponentenansicht <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();
};
}
wenn ich lade, wird das erste Element korrekt geladen:
aber als ich die zweite betrat, wurden alle für die letzte ersetzt:
Irgendeine Idee was ist los?
Sie machen es zu kompliziert. Sie müssen keine Komponenten dynamisch instanziieren, damit dieses Szenario funktioniert.
Sie können einfach Folgendes tun:
<ul>
@foreach (var item in listItems)
{
<myComponent bind-myVar="@item"></myComponent>
}
</ul>
Und die Komponenten werden für Sie instanziiert.
Hier erfahren Sie auch , wie Sie die Parameter auf Ihre Komponente anwenden können.