ブレザーの動的コンポーネントのリストを追加する

asp.net-core blazor c#

質問

私はちょうどブレザー(v0.3)で見て始め、いくつかのテストをして、私はブレザーを使用してリストを追加したい

最初に、 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();

    };
}

最初の要素をロードすると、正しくロードされます。 ここに画像の説明を入力

しかし、私が2番目のものに入ったとき、それらのすべてが最後のものに置き換えられます:

ここに画像の説明を入力

どんな考えが起こっているの?

人気のある回答

これは、 TxtExampleがコンポーネントに対してグローバルであるためです。 Blazorが潜在的なUI変更を検出すると、コンポーネント全体を再計算し、DOMを更新します。テキストボックスを変更すると、 TxtExampleが更新され、次にRazorが再計算され、すべての行に対して新しい値のTxtExample挿入されます。




ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow
このKBは合法ですか? はい、理由を学ぶ
ライセンスを受けた: CC-BY-SA with attribution
所属していない Stack Overflow
このKBは合法ですか? はい、理由を学ぶ