Problem to make the drop down menu dynamic - dynamic

Question

I have been doing a project in which I need to create a dynamic drop down menu. In this project I am been using Angular 8 and bootstrap 4
The piece of code of 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>
The above code is taken from the bootstrap site with the dropdown code:
<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>
and I have tried to use it with the below which I found in the 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>
The code from component.ts from some tutorial:
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]
Could you please point me out, how should I fix it?
Thanks.

Answer 1

Can you try below?
Define how each order is going to look like outside your component class
interface OrderEntity
{
id : string;
name : string;
}
Inside you component class specify that, orders array will have the same structure
orders: OrderEntity[] = [];
With in getOrders try and push data into orders array
getOrders()
{
this.order.push({id : '1', name : 'order1'});
}
On the template you ca access orders as list and access each item by doing let item of orders; and obtain its attributes {{item.id}} and {{item.name}}