I am new to Angular and trying to make a small application.

I referred 'object' does not contain such a member answer but I am not getting my solution from there.

profileponent.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-profile',
  templateUrl: './profileponent.html',
  styleUrls: ['./profileponent.css']
})
export class ProfileComponent implements OnInit {
  user: Object;
  constructor(private authService: AuthService, private roter: Router) {}

  ngOnInit() {
    this.authService.getProfile().subscribe(
      profile => {
        this.user = profile.user;
      },
      err => {
        console.log(err);
        return false;
      }
    );
  }
}

profileponent.html

<div *ngIf="user">
  <h2 class="page-header">
    {{ user.name }}
  </h2>
  <ul class="list-group">
    <li class="list-group-item">
      Username: {{ user.username }}
    </li>
    <li class="list-group-item">
      Email: {{ user.email }}
    </li>
  </ul>
</div>

Visual studio code is showing this Error:

[Angular] Identifier 'username' is not defined. 'Object' does not contain such a member

property user of ProfileComponent

I am new to Angular and trying to make a small application.

I referred 'object' does not contain such a member answer but I am not getting my solution from there.

profile.ponent.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.ponent.html',
  styleUrls: ['./profile.ponent.css']
})
export class ProfileComponent implements OnInit {
  user: Object;
  constructor(private authService: AuthService, private roter: Router) {}

  ngOnInit() {
    this.authService.getProfile().subscribe(
      profile => {
        this.user = profile.user;
      },
      err => {
        console.log(err);
        return false;
      }
    );
  }
}

profile.ponent.html

<div *ngIf="user">
  <h2 class="page-header">
    {{ user.name }}
  </h2>
  <ul class="list-group">
    <li class="list-group-item">
      Username: {{ user.username }}
    </li>
    <li class="list-group-item">
      Email: {{ user.email }}
    </li>
  </ul>
</div>

Visual studio code is showing this Error:

[Angular] Identifier 'username' is not defined. 'Object' does not contain such a member

property user of ProfileComponent

• javascript
• typescript
• angular5

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 9, 2018 at 6:01 Nikhil SavaliyaNikhil Savaliya 2,16644 gold badges2626 silver badges4545 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Either change

user: Object; 

by

user: any;

In your profile.ponent.ts this will surely work,because initially you have declared it as object so while running the or building app typescript pilation fails due to accessed as user.username. Either you change the type to any or create interface or type having required properties and assign this type to user Ex: profile.ponent.ts:

interface userObject {
  username:string,
  password:string
} 

access as

export class ProfileComponent implements OnInit {
   user : userObject;
}

you have defined user in ProfileComponent class as Object type.wich has no Typescript Model defined.Therefore Typescript is unaware of the structure of the User Object. So you create a model like this.

interface User{
    username : String;
    password: ...
    ....
  }  

and then use it as type like user : User

The problem will be solved.

When you define an object it doesn't have firstName or lastName. So when accessing from ui it shows the error. So first initialize as given below. Then the issue will be solved.

let user = {firstName: "", lastName:""};

Code:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.ponent.html',
  styleUrls: ['./profile.ponent.css']
})
export class ProfileComponent implements OnInit {
  let user = {firstName: "", lastName:""};
  constructor(private authService: AuthService, private roter: Router) {}

  ngOnInit() {
    this.authService.getProfile().subscribe(
      profile => {
        this.user = profile.user;
      },
      err => {
        console.log(err);
        return false;
      }
    );
  }
}

Object refers to the inbuilt object constructor function, which obviously doesn't have the property username. Since you're setting the type of user to be Object and trying to access the property username that doesn't exist, it's showing error.

If you want to define your own types, refer this.