在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>組件只是為了測試組件的功能,這裡是組件視圖
<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 = "";
    }

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

}

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

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

在此處輸入圖像描述

有什麼想法嗎?

熱門答案

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




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