Listing items from an array via Angular - arrays

Question

I just can't work out how to list/loop through items from an array into my component. All the online tutorials and SO answers make sense, but my code won't respond in a like fashion.
My scenario is this: A user selects an option from a menu and...
switch(which){
:
case 'who': {
this.getStaffList('stafflist');
break;
}
:
the database is called and returns an array...
getStaffList(value:string){
this.targetID = value;
this.service.getStuff(this.targetID).subscribe(
items => {
console.log(items[0].fname); <---this yields 'Sue'
this.title = "Your staff list";
}, error => {
}, () => {
}
);
}
The PHP view of the array (before JSON.encode) is:
Array
(
[0] => Array
(
[userID] => 6551
[certID] => SB287
[fname] => Sue
[lname] => Bennett
)
[1] => Array
(
[userID] => 6568
[certID] => MF6568
[fname] => Marion
[lname] => Ferguson
)
:
Back in Angular, the very simple template is:
<div id="stafflist" class="mainbox" *ngIf="bListStaff">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">{{title}}</div>
</div>
<div style="padding-top:25px" class="panel-body">
{{items[0].fname}} <!--This generates a '..._co.items is undefined' error
<ul>
<li *ngFor="let item of items; let i = index">{{i}} {{item}}</li> <--- this yields nothing/zilch
</ul>
</div>
</div>
</div>
The '..._co.items is undefined' error that I'm receiving suggests that the items array isn't known outside of getStaffList, but I don't understand why that is (if it is) and don't understand what's missing in my approach.

Answer 1

You are not assigning items inside the subscribe, create a variable named items of type any and assign the value inside the subscription,
getStaffList(value:string){
this.targetID = value;
this.service.getStuff(this.targetID).subscribe(
items => {
this.items = items;
this.title = "Your staff list";
}, error => {
}, () => {
}
);
}
also since the request is asynchronous use safe navigation operator to check if the value is present before the values are being assigned,
<div style="padding-top:25px" class="panel-body">
{{items[0]?.fname}} <!--This generates a '..._co.items is undefined' error
<ul>
<li *ngFor="let item of items; let i = index">{{i}} {{item}}</li> <--- this yields nothing/zilch
</ul>
</div>

Answer 2

Just define a property items in your component class and set it like this:
getStaffList(value:string){
this.targetID = value;
this.service.getStuff(this.targetID).subscribe(
items => {
console.log(items[0].fname); <---this yields 'Sue'
this.title = "Your staff list";
this.items = items;
}, error => {
}, () => {
}
);
}
The scope of the items in your subscribe is only inside that function so it's not accessible from the outside.