Проблема сделать динамическое выпадающее меню

Question

Я делал проект, в котором мне нужно создать динамическое выпадающее меню.В этом проекте я использую Angular 8 и загрузчик 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]

Не могли бы вы указать мне, как мне это исправить?

Спасибо.

Answer 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}}