如何解决ngx-bootstrap 嵌套下拉菜单项绑定
我使用 ngx-bootstrap 嵌套下拉菜单。这是来自 ngx-bootstrap nested dropdowns
的代码<div class="btn-group" dropdown [autoClose]="false" container="body">
<button id="button-nested" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
aria-controls="dropdown-nested">
This dropdown has nested submenu <span class="caret"></span>
</button>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Action</a></li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Hover me for nested dropdown 1<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">aaa0</a></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">aaa1</a></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">aaa2</a></li>
</ul>
</li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Hover me for nested dropdown 2<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">bbb0</a></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">bbb1</a></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">bbb2</a></li>
</ul>
</li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Separated link</a></li>
问题是所有菜单项都是硬编码的。我想将它们与动态值绑定。所以在 ts 代码中。
MenuItems: any;
this.MenuItems.push('Hover me for nested dropdown 1');
this.MenuItems.push('Hover me for nested dropdown 2');
现在我将它应用于 ui 元素。
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested" *ngFor='let item of MenuItems'>
但是我得到了错误：
只能应用一个结构指令
那么有什么解决办法呢？
更新：
如果对象是复杂的，怎么办？ 例如：
[{
id: '0001',type: 'donut1',name: 'Cake1',ppu: '0.55',batters:
{
batter:
[
{ id: '1001',type: 'Regular1' },{ id: '1002',type: 'Chocolate1' },{ id: '1003',type: 'Blueberry1' },{ id: '1004',type: 'Devils Food1' }
]
},topping:
[
{ id: '5001',type: 'None1' },{ id: '5002',type: 'Glazed1' },{ id: '5005',type: 'Sugar1' },{ id: '5007',type: 'Powdered Sugar1' },{ id: '5006',type: 'Chocolate with Sprinkles1' },{ id: '5003',{ id: '5004',type: 'Maple1' }
]
},{
id: '0002',type: 'donut2',name: 'Cake2',batters:
{
batter:
[
{ id: '1001',type: 'Regular2' },type: 'Chocolate2' },type: 'Blueberry2' },type: 'Devils Food2' }
]
},type: 'None2' },type: 'Glazed2' },type: 'Sugar2' },type: 'Powdered Sugar2' },type: 'Chocolate with Sprinkles2' },type: 'Maple2' }
]
}]
解决方法
通过查看您的 json，您似乎想要在嵌套下拉列表中嵌套下拉列表。所以，对于你的 json，我认为下面的代码应该适合你：
<div class="btn-group" dropdown [autoClose]="false" container="body">
<button id="button-nested" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
aria-controls="dropdown-nested">
This dropdown has nested submenu <span class="caret"></span>
</button>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-nested">
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body"
*ngFor="let item of menuItems">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">{{item.name}}<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">batters<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body"
*ngFor="let batter of item.batters.batter">
<a class="dropdown-item dropdown-toggle" (click)="false">{{batter.type}}</a></li>
</ul>
</li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">toppings<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body"
*ngFor="let topping of item.topping">
<a class="dropdown-item dropdown-toggle" (click)="false">{{topping.type}}</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
如果您希望所有项目都是下拉列表，那么下面的代码将起作用。
<div class="btn-group" dropdown [autoClose]="false" container="body">
<button id="button-nested" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
aria-controls="dropdown-nested">
This dropdown has nested submenu <span class="caret"></span>
</button>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body" *ngFor="let item of menuItems">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">{{item}}<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">bbb0</a></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">bbb1</a></li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">bbb2</a></li>
</ul>
</li>
</ui>
</div>
如果您希望某些项目成为链接而其他项目是嵌套下拉列表，那么您可以在 li 中使用 ngIf Else。
此外，对于您的错误，如果您想使用多个结构指令，您可以使用 ng-container 或 ng-template。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
