在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合法吗? 是的,了解原因