Question

我一直在做一个需要在其中创建动态下拉菜单的项目。在这个项目中，我一直在使用Angular 8和bootstrap 4

html代码

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">

                <li ng-model="getOrders" ng-repeat="order in orders">
                        <a ng-click="getOrders()">{{orders}}</a> 

                    //also tried {{ order.name }} - no result


                      </li>
          <!-- <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a> -->
        </div>
      </li>

上面的代码来自带有下拉代码的引导站点：

<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>

并且我尝试将其与以下在Internet上找到的内容一起使用：

<span class="dropdown" dropdown on-toggle="toggled(open)">
  <a href class="dropdown-toggle" dropdown-toggle>
    Click me!
  </a>
  <ul class="dropdown-menu">
    <li ng-repeat="choice in items">
      <a ng-click="runFn(choice.fn)">{{choice.name}}</a> 
    </li>
  </ul>
</span>

一些教程中来自component.ts的代码：

form: FormGroup;
orders = [];

public someinfo:String = "";
public info:String = "";

constructor(private formBuilder: FormBuilder) { 

this.form = this.formBuilder.group({
  orders: ['']
});

this.orders = this.getOrders();

}

ngOnInit() {
}

getOrders() {
return [
  { id: '1', name: 'order 1' },
  { id: '2', name: 'order 2' },
  { id: '3', name: 'order 3' },
  { id: '4', name: 'order 4' }
];
}


After compiling the project and clicking the Dropdown Menu, the       
result is like below:

[object Object],[object Object],[object Object],[object Object]

能否请您指出我，我该如何解决？

谢谢。

Answer 1

您可以尝试以下吗？

定义每个订单在组件类外部的外观

interface OrderEntity
{
    id : string;
    name : string;
}

在组件类内部指定，orders数组将具有相同的结构

orders: OrderEntity[] = [];

在getOrders中尝试将数据推入orders数组

getOrders()
{
    this.order.push({id : '1', name : 'order1'});
}

在模板上，您可以按列表访问订单，并通过执行let item of orders;访问每个项目并获取其属性{{item.id}}和{{item.name}}

使下拉菜单动态化的问题

1 个答案: