angular 2 cannot access array of objects from json - json

Question

I am connecting my app with an API. whenever I do a post request, I will get a json back that looks like this
{
"output": {
"text": {
"values": [
"Sure ! What kind of mouse would you like"
],
"selection_policy": "sequential"
},
"cards": [
{
"Mouse_Type": "Wireless"
},
{
"Mouse_Type": "Optical"
}
]
}
}
in my html I have created this:
<ul class="cards-options">
<li *ngFor="let options of listOptions" >
<span class="card">
<p>{{options.Mouse_Type }}</p>
</span>
</li>
</ul>
my component is like this:
export class InputFieldComponent implements OnInit {
value = '';
listOptions = '';
public context :object;
constructor(private http : Http) { }
ngOnInit() {
}
onEnter(value: string) {
this.http.post('/APIconversation', {"input":value })
.map(response=>response.json())
.subscribe(
data => {
this.listOptions = data.output.cards;
console.log(this.listOptions);
}
)
}
Whenever I inspect the element of the *ngFor I find this:
bindings={ "ng-reflect-ng-for-of": "[object Object],[object
Object" }
How can I access the string within the object? I did the same exact thing with another API and it was working.
Thanks for your help.