добавить список динамических компонентов в Blazor - PullRequest
Новая
       14

добавить список динамических компонентов в Blazor

0 голосов
/ 11 мая 2018

Я только начал изучать Blazor (v0.3) и, выполнив несколько тестов, я хотел добавить список с помощью Blazor

Сначала я создал List<string> для тестирования простого списка в том жеpage 

<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> Component просто для проверки функциональности компонентов, вот представление компонента 
<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();

    };
}

когда я загружаю элемент кулака загружен правильно: enter image description here

но когда я ввел второй, все онизаменено на последнее:

enter image description here

Есть идеи, что происходит?

Ответы [ 2 ]

0 голосов
/ 18 мая 2018

Это потому, что TxtExample является глобальным для компонента.Когда Blazor обнаруживает потенциальное изменение пользовательского интерфейса, он пересчитывает весь компонент и обновляет DOM с любыми различиями.Поэтому, когда вы изменяете текстовое поле, обновляется TxtExample, а затем бритва пересчитывает, вставляя новое значение TxtExample для всех строк.

0 голосов
/ 11 мая 2018

Вы делаете это слишком сложным.Вам не нужно динамически создавать экземпляры компонентов, чтобы этот сценарий работал.

Вы можете просто сделать: 

<ul>
    @foreach (var item in listItems)
    {
        <myComponent bind-myVar="@item"></myComponent>
    }
</ul>

И компоненты будут созданы для вас.

Также см. здесь , как заставить параметры работать на вашем компоненте.

...