Angular 8 component error, I Think component loading before user logged in

Hello,

Getting the following error message at compile time and before logging into the application.

This script itself works. if I login and go to the member dashboard, the application does load the list. I narrowed the error to the html component(member-dashboard.component.html) and narrowed even further down to whats causing the error message and I believe it has to do with the values its trying to load/list is’t, i think the application is trying to load before even logging into the application. I’m somewhat new to Angular but I’m assuming the member dashboard shouldn’t load before a user logs into the application??? or I’m wrong on my assumption

Error message received at compile time(Angular 8):

 src/app/components/member-dashboard/member-dashboard.component.ts:7:17
        7    templateUrl: './member-dashboard.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component MemberDashboardComponent.

member-dashboard.component.html

<p>member-dashboard works!</p>
<table>
   <tr *ngFor="let val of this.getMemberList1">
       <!-- BUG: the getmember list and values causing the error message that appears at compile -->
        <td>{{ val['memIndex'] }}</td>
        <td>{{ val['memLastname'] }}</td>
        <td>{{ val['memEmail'] }}</td> 
    </tr>
</table>
<button class="btn btn-primary" (click)="logOut()">LogOUT</button>

member-dashboard.component.ts

	ngOnInit() { 
		this._getMembers.getMemberList()
		.subscribe( data => { 
			this.getMemberList1 = data;	
			console.log( JSON.stringify(this.getMemberList1));
		});
   }   
   
	logOut() {
		this._loginService.logout();
   	}

sample output data that this component pulls in from a database.

[{"memIndex":1,"memFirstname":"Jasenpwd","memLastname":"Marchington","memEmail":"jmarchington0@chronoengine.com"},{"memIndex":2,"memFirstname":"Jeanpwd","memLastname":"Adney","memEmail":"jean@test.com"},{"memIndex":3,"memFirstname":"Burke","memLastname":"Danilishin","memEmail":"bdanilishin2@elpais.com"},{"memIndex":4,"memFirstname":"Dniren","memLastname":"Cullip","memEmail":"dcullip3@pen.io"},{"memIndex":5,"memFirstname":"Richardo","memLastname":"Lowndsbrough","memEmail":"rlowndsbrough4@dell.com"},{"memIndex":6,"memFirstname":"Vally","memLastname":"Lowbridge","memEmail":"vlowbridge5@google.de"},{"memIndex":7,"memFirstname":"Caye","memLastname":"Acory","memEmail":"cacory6@ovh.net"},{"memIndex":8,"memFirstname":"Willi","memLastname":"Tregidga","memEmail":"wtregidga7@purevolume.com"},{"memIndex":9,"memFirstname":"Boothpwd","memLastname":"Paulo","memEmail":"bpaulo8@joomla.org"},{"memIndex":10,"memFirstname":"Kippar","memLastname":"Hanwell","memEmail":"khanwell9@cbc.ca"}]

use {{ val.memIndex }} instead.
Not sure if it helps, but Angular is a bitch… I’d very much imagine that it would bitch for as simple things as array accessors.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.