Blazor MatMenu在foreach循环的所有菜单中取最后一个值 [英] Blazor MatMenu taken last value in all menu in foreach loop

查看:176
本文介绍了Blazor MatMenu在foreach循环的所有菜单中取最后一个值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

MatMenu在foreach循环中为所有列表项保留最后一个实例

MatMenu carrying last instance for all the listitems in foreach loop

        @foreach (var sub in subs)
            {
             <MatButton Label="Menu" OnClick="@OnClick" RefBack="@buttonForwardRef"></MatButton>
 <MatMenu @ref="Menu" TargetForwardRef="@buttonForwardRef">
                      <MatList SingleSelection="true">
                        <MatListItem>@sub.SubName</MatListItem>
                      </MatList>
    </MatMenu>
                  }

Everey行要使用差异菜单

Everey row want differene menu

推荐答案

您的问题是您正在所有菜单之间共享buttonForwardRef.您是否需要每个菜单的新参考:

Your issue is that you are sharing buttonForwardRef between all menus. Do you need new references for each menu:

@using Microsoft.AspNetCore.Components

@foreach (var sub in subs)
{
    <MatButton @ref="@sub.Button2"
        Label="@sub.SubName" 
        OnClick="@( (_) => OnClick(sub.Button2, sub.Menu2, sub.SubName) )">
    </MatButton>
    <MatMenu @ref="@sub.Menu2">
        <MatList>
            <MatListItem>@sub.SubName</MatListItem>
        </MatList>
    </MatMenu>
}
<h1>@subTxt</h1>

@functions
{
    public class Sub
    {
        public string SubName {set; get;} 
        public BaseMatButton Button2 {set; get;}   // reference
        public BaseMatMenu Menu2 {set; get;}       // reference
    }

    List<Sub> subs = new List<Sub> 
    {
        new Sub() { SubName="A", Button2=null, Menu2=null },
        new Sub() { SubName="B", Button2=null, Menu2=null },
        new Sub() { SubName="C", Button2=null, Menu2=null },
    };

    string subTxt = "";

    public void OnClick(BaseMatButton button, BaseMatMenu menu, string sub)
    {
        subTxt=sub;
        menu.OpenAsync(button.Ref);        
    }

}

blazorfiddle 中查看示例:

Check sample at blazorfiddle:

这篇关于Blazor MatMenu在foreach循环的所有菜单中取最后一个值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆