MatSnackbar не обновляет MatSnackBarContent - PullRequest
Новая
       30

MatSnackbar не обновляет MatSnackBarContent

1 голос
/ 20 октября 2019

В моем коде при многократном открытии MatSnackBar содержимое, отображаемое в SnackBar, не обновляется так, как мне кажется. Пример: 

@page "/"

    <div> count value: @count </div>
    <MatButton OnClick="ButtonClick">Open</MatButton>
    <MatSnackbar @bind-IsOpen="@snackBarIsOpen">
        <MatSnackbarContent>Count: @count</MatSnackbarContent>
        <MatSnackbarActions>
            <MatButton Raised="true" @onclick="() => { snackBarIsOpen = false; }" >Close</MatButton>
        </MatSnackbarActions>
    </MatSnackbar>

    @code
    {
        bool snackBarIsOpen = false;
        int count = 0;

        void ButtonClick()
        {
            snackBarIsOpen = true;
            count++;
            this.StateHasChanged();
        } 
    }

При многократном нажатии на кнопку SnackBar всегда отображает «Count: 1». Что я делаю не так?

1 Ответ

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

Когда вы запускаете свою домашнюю страницу в первый раз, единственным видимым элементом является MatButton. MatSnackbar не виден, поскольку его значение атрибута параметра равно false: 

@bind-IsOpen="@snackBarIsOpen"

bool snackBarIsOpen = false;

Когда вы нажимаете MatButton, выполняется обработчик события ButtonClick, snackBarIsOpen == true, и компонент MatSnackbar «перерисовывается». Но теперь значение параметра IsOpen компонента равно true, и поэтому оно отображается вместе с содержимым компонента MatSnackbarContent. Ниже приведен код, который делает это:

BaseMatSnackbar.cs (обратите внимание, мои комментарии ...) 

[Parameter]
        public bool IsOpen
        {
            get => _isOpen;
            set
            {
                // When the component is created the value of IsOpen is false 
                // and the parameter value passed to it is also false, so the 
                // code within the if block is not executed.
                if (IsOpen != value)
                {
                    _isOpen = value;
                    // After clicking the MatButton IsOpen != value, and thus 
                    // this code is executed by JavaScript to display the 
                    // component
                    CallAfterRender(async () =>
                    {
                        await JsInvokeAsync<object>("matBlazor.matSnackbar.setIsOpen", Ref, value);
                    });
                }
            }
        }

Когда вы нажимаете MatButton в следующий раз IsOpen == value,выше, если блок не выполняется, условие IsOpen != value, другими словами, зачем отображать компонент, если он уже отображается.

Теперь, когда вы нажимаете MatButton, локальная переменная увеличивается, но содержимое MatSnackbarContent остается неизменным после первого щелчка: «Count: 1», другими словами, компонент MatSnackbarContent не являетсяперерисован с новым значением count.

Я опубликую здесь часть соответствующего кода, и, возможно, вы сможете пролить некоторый новый свет на эти компоненты. Я не знаком с MatBlazor, и я бы лучше сначала изучил ядро ​​Blazor ...

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor.Web/src/matSnackbar/matSnackbar.js

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor/Components/MatSnackbar/MatSnackbar.razor

https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor/Components/MatSnackbar/BaseMatSnackbar.cs

Надеюсь, это поможет ...

...