MatSnackbar不更新MatSnackBarContent [英] MatSnackbar not updating MatSnackBarContent
问题描述
在我的代码中，当多次打开MatSnackBar时，SnackBar中显示的内容不会像我想的那样更新.示例:
In my code when opening a MatSnackBar multiple times the content that is displayed in the SnackBar does not update as I suppose it should. Example:
@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".我在做什么错了?
When clicking multiple times on the button, the SnackBar always displays "Count: 1". What am I doing wrong?
推荐答案
首次运行主页时，唯一可见的元素是MatButton.无法看到MatSnackbar，因为其参数属性值为false:
When you run your home page for the first time the only visible element seen is MatButton. MatSnackbar is not seen because its parameter attribute value is false:
@bind-IsOpen="@snackBarIsOpen"
bool snackBarIsOpen = false;
当您单击MatButton时，将执行ButtonClick事件处理程序， snackBarIsOpen == true ，并且MatSnackbar组件将被重新渲染".但是现在该组件的IsOpen参数值是true，因此它与MatSnackbarContent组件的内容一起显示.下面是执行此操作的代码:
When you click on MatButton, the ButtonClick event handler is executed, snackBarIsOpen == true, and the MatSnackbar component is 're-rendered'. But now the IsOpen parameter value of the component is true, and thus it is displayed with the content of the MatSnackbarContent component. Below is the code that does this:
[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 时，上面的if块未执行，条件为 IsOpen！= value ，换句话说，为什么要显示该组件(如果已显示).
When you click the MatButton for the next time IsOpen == value, the above if block is not executed, the condition being IsOpen != value, in other words, why display the component if it is already displayed.
现在，每当您点击MatButton时，局部变量都会增加，但是第一次单击后MatSnackbarContent的内容将保持不变:"Count:1"，换句话说，MatSnackbarContent组件不会随计数的新值.
Now, whenever, you hit the MatButton, the local variable is incremented, but the content of the MatSnackbarContent remains the same after the first click: "Count: 1", in other words, the MatSnackbarContent component is not rerendered with the new value of count.
我将在此处发布一些相关的代码，也许您可以对这些组件有一些新的了解.我对MatBlazor不熟悉，我宁愿先学习Blazor的核心...
I'll post here some of the relevant code involved, and perhaps you can shed some new light about those components. I'm not familiar with MatBlazor, and I'd rather learn the core of Blazor first...
https://github.com/SamProf/MatBlazor/blob/master/src/MatBlazor.Web/src/matSnackbar/matSnackbar.js
希望这对您有帮助...
Hope this helps...
这篇关于MatSnackbar不更新MatSnackBarContent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
