使下拉菜单动态化的问题答案

【问题标题】：Problem to make the drop down menu dynamic使下拉菜单动态化的问题
【发布时间】：2019-09-25 23:50:27
【问题描述】：

我一直在做一个项目，我需要在其中创建一个动态下拉菜单。在这个项目中，我一直在使用 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>

我已经尝试将它与我在互联网上找到的以下内容一起使用：

<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]

你能指出我，我应该如何解决它？

谢谢。

【问题讨论】：

标签： dynamic dropdown angular8

【解决方案1】：

你可以试试下面吗？

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

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

在您的组件类中指定，订单数组将具有相同的结构

orders: OrderEntity[] = [];

在 getOrders 中尝试将数据推送到订单数组中

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

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

【讨论】：

感谢您重播 RR1112，我尝试了上述方法，但出现错误：类型 'number' 不可分配给类型 'OrderEntity[]'
@bartosz - 它在哪一行抱怨？如果按订单： OrderEntity[]= [];你也可以做订单：OrderEntity[];
它在哪一行抱怨 - this.orders = this.getOrders(); 'this.orders' 用红色下划线。我试图从这个表单中缩短表单：OrderEntity[] = [];对此订单：OrderEntity[];但它仍然因注释而失败 - 类型 'number' 不可分配给类型 'OrderEntity[]'。
对。你不需要这样做 this.orders= this.getOrders();因为 getOrders 没有返回任何东西！它只修改（即推送项目）this.orders，this.orders 可以直接在模板中使用。只需调用 this.getOrders();而不是 this.orders = this.getOrders();希望这会有所帮助。
还是同样的问题