fügen Sie eine Liste der dynamischen Komponenten in blazor hinzu

asp.net-core blazor c#

Frage

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:

  • Ich habe eine <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; }
}
  • dann in der Elternansicht
<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: Bildbeschreibung hier eingeben

aber als ich die zweite betrat, wurden alle für die letzte ersetzt:

Bildbeschreibung hier eingeben

Irgendeine Idee was ist los?

Beliebte Antwort

Dies liegt daran, dass TxtExample für die Komponente TxtExample ist. Wenn Blazor eine mögliche Änderung der Benutzeroberfläche erkennt, berechnet es die gesamte Komponente neu und aktualisiert das DOM mit allen Unterschieden. Wenn Sie also das Textfeld ändern, wird TxtExample aktualisiert und der Razor berechnet den neuen Wert von TxtExample für alle Zeilen neu.



Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum
Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum