Matblazor 组件属性：复杂的内容答案

【问题标题】：Matblazor component attributes: complex contentMatblazor 组件属性：复杂的内容
【发布时间】：2021-01-06 21:44:12
【问题描述】：

如果某个条件为假，我正在尝试制作一个禁用的按钮。对于常规按钮，这是可行的：

<button @disabled="!IsReady">Click me</button>
@code
{
    public bool IsReady { get; set; }
}

我正在使用具有 MatButton 版本的 button 的 MatBlazor 库：

<MatButton Disabled="@!IsReady">Click me</MatButton>

后者不起作用：它给出以下错误：

组件属性不支持复杂内容（混合 C# 和标记）

在好的 ol' WPF 中，我们可能会在绑定中使用转换器，因此绑定的布尔值是反转的。这是 MatBlazor 的限制吗？

我看到的快速解决方案是执行以下操作：

<MatButton Disabled="@IsNotReady">Click me</MatButton>
@code
{
    public bool IsReady { get; set; }
    public bool IsNotReady => !IsReady;
}

有没有更好的办法？

【问题讨论】：

标签： binding blazor matblazor

【解决方案1】：

最终解决方案非常简单：您只需将 C# 代码用括号括起来即可：

<MatButton Disabled="@(!IsReady)">Click me</MatButton>

【讨论】：

【解决方案2】：

使用 @ 符号时，您通常会从 HTML 上下文切换到 C# 上下文。因此，当您说诸如 Disabled="@IsNotReady" 之类的内容时，它就可以正常工作。当您尝试做一些更复杂的事情时，即使只是一个“！”运算符，这足以成为需要评估的东西，而不仅仅是对值的引用。因此，Blazor 要求您使用 @( /* code*/ ) 并期望它评估为可以作为文本呈现到输出的内容（在本例中为 html）。 Blazor 需要文字、字段或属性。所以你可以创建一个属性，例如：

private bool isNotReady => !isReady;

这可能看起来毫无意义，但实际上它更强大 - 您可以执行许多逻辑来评估为真/假或您需要呈现给某些子组件的任何类型。所以这也可以说是更好的关注点分离。

因此，您的代码可能更像这样：

<MatButton Disabled="@IsNotReady">Click me</MatButton>

【讨论】：