Компонент Blazor - реагирует на изменение параметров списка - PullRequest
Новая
       7

Компонент Blazor - реагирует на изменение параметров списка

0 голосов
/ 11 октября 2019

Мне не ясно, как заставить компонент Blazor (Server) реагировать на изменение одного из его параметров.

Итак, это урезанная версия моего компонента 

@foreach (var msg in this.Data)
{
    <div class="bg-danger text-white">
        <div>@msg</div>
    </div>
}
@code
{
    [Parameter]
    public IList<Something> Data{ get; set; } = null!;
}

Тогда на моей странице у меня есть 

<mycomponent Data="@StuffForComponent"><mycomponent>
@code
{
    private List<Something> StuffForComponent {get;} = new List<Something>();

    private async Task HandleSomeEvent()
    {
          var r = await this.Service.GetSomething().ConfigureAwait(false);
          this StuffForComponent.AddRange(r.Stuff);
    }
}

Итак, идея состоит в том, что компонент создается при загрузке страницы, а пустой список передается входному параметру.

Некоторое время спустя мы обрабатываем пользовательское событие, и это добавляет данные в этот список. Однако компонент не реагирует на измененный список.

Что нужно сделать, чтобы компонент реагировал на новые записи, добавляемые или удаляемые из этого списка?

Ответы [ 2 ]

0 голосов
/ 14 октября 2019

Я получил это на работу. Это немного сложно, но может помочь другим ....

Итак, у меня есть страница Razor с моим компонентом вверху страницы: 

<mycomponent Data="@StuffForComponent"><mycomponent>

С этим определенным свойством:

private List<Something> StuffForComponent {get;} = new List<Something>();

У меня есть сетка с кнопкой в ​​строке. Для этой кнопки определено действие: 

[Parameter]
public IList<Action<object>>? Actions { get; set; }

Когда кнопка нажата, она делает все, что должна, а затем вызывает это действие (метод, определенный на моей странице), передавая информацию.

Этот метод проверяет данные, предоставленные кнопкой, и решает, как он будет обновлять список. Как уже упоминалось @dani, он потребовал StateHasChanged ().

Я реализовал как: 

private void MyCallbackMethod(object obj)
{
    this.StuffForComponent.Clear();
    if (obj is SomeType response)
    {
        InvokeAsync(() =>
        {
            this.StuffForComponent.Add(response.ValueToInspect
            ? new Something{ .... }
            : new Something{ .... });

            this.StateHasChanged();

        }).GetAwaiter().GetResult();
    }
}

Требуется InvokeAsync, потому что это не основной поток пользовательского интерфейса.

0 голосов
/ 12 октября 2019

Вам необходимо добавить функцию обратного вызова для корректного обновления компонента. Попробуйте добавить событие обратного вызова для дочернего компонента, затем на своей странице используйте «@Bind», чтобы связать список страниц с внутренним списком дочерних компонентов.

Вот дополнение дочернего компонента: 

code{

...
 [Parameter]
    public EventCallback<List<Something>> DataChanged{ get; set; }
...
}

Вот изменение страницы 

<mycomponent @bind-Data="StuffForComponent"><mycomponent>

Это называется связыванием по цепочке, и вы можете узнать больше об этом, выполнив поиск "chain" здесь

...