In my project, I am attempting to compile a list of Profile objects and then extract specific elements from each object in the list. To accomplish this, I have defined a public interface named Profile, imported it into my component, and instantiated a new Profile object while assigning values to attributes like id, username, and profilepic.
The issue arises when using *ngFor to iterate through the array. The iteration does not recognize the attributes id, username, or profilepic. Interestingly, when I log curP.username, the correct username is displayed in the console. This leads me to wonder if there is a mistake in my definition. Additionally,
console.log(this.displayActiverUser)id, username, and profilepic successfully.
Profile Interface:
export interface Profile {
id: any;
username: any;
profilePic: any;
}
Component Implementation:
displayActiveUser = new Array<Profile>(10); // An array representing users
activeUserArray = new Array(10);
for (var n = 0; n < numAvalAcct; n++){
let curP: Profile = {id: parseInt(this.activeUserArray[n][1]), username: this.activeUserArray[n][0], profilePic: "testurl"};
console.log("username", curP.username);
this.displayActiveUser[n] = curP;
}
HTML Template Using *ngFor (The error occurs on the line with {{profile.username}})
<div class="list-group">
<a *ngFor="let profile of displayActiveUser" (click)="followedNewUser(profile)" href="" target="popup" class="list-group-item list-group-item-action">
<img src="" class="rounded-circle" alt="profile picture" width="25" height="25"> {{profile.username}}
</a>
</div>
Output from
console.log(this.displayActiverUser)0: {id: 135, username: "adamhaddad4", profilePic: "testurl"}
1: {id: 136, username: "ian.mccleary", profilePic: "testUrl"}
2: {id: 1, username: "dddd", profilePic: "testurl"}
3: {id: 134, username: "timtim1", profilePic: "testUrl"}
EDIT: The complete error message reads:
ERROR TypeError: Cannot read property 'username' of undefined
at FollowForFollowComponent_a_6_Template (follow-for-follow.component.html:8)
at executeTemplate (core.js:7329)
at refreshView (core.js:7198)
at refreshEmbeddedViews (core.js:8289)
at refreshView (core.js:7222)
at refreshComponent (core.js:8335)
at refreshChildComponents (core.js:6991)
at refreshView (core.js:7248)
at refreshEmbeddedViews (core.js:8289)
at refreshView (core.js:7222)