在blazor中添加動態組件列表

asp.net-core blazor c#

我剛開始看一下blazor(v0.3)並做一些測試我想用blazor添加一個列表

首先,我創建了一個List<string>來測試同一頁面中的一個簡單列表

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

}

這工作正常,我添加它時將每個元素添加到列表中。但後來,我嘗試添加組件,添加單個組件很容易,基於這個問題但是對於列表我有下一個問題:

  • 我創建了一個<li>組件只是為了測試組件的功能,這裡是組件視圖
<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();

    };
}

當我加載第一個元素正確加載: 在此處輸入圖像描述

但當我進入第二個時,所有這些都被替換為最後一個:

在此處輸入圖像描述

有什麼想法嗎?

熱門答案

這是因為TxtExample對組件是全局的。當Blazor檢測到潛在的UI更改時,它會重新計算整個組件並以任何差異更新DOM。因此,當您更改文本框時,會更新TxtExample ,然後重新計算Razor,為所有行插入新的TxtExample值。



許可下: CC-BY-SA with attribution
不隸屬於 Stack Overflow
這個KB合法嗎? 是的,了解原因
許可下: CC-BY-SA with attribution
不隸屬於 Stack Overflow
這個KB合法嗎? 是的,了解原因