'object' does not contain such a member Angular 5

问题

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.component.ts

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

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.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.component.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

回答1:

Either change

user: Object;

user: any;

In your profile.component.ts this will surely work,because initially you have declared it as object so while running the or building app typescript compilation 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.component.ts:

interface userObject {
  username:string,
  password:string
}

access as

export class ProfileComponent implements OnInit {
   user : userObject;
}

回答2:

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.

回答3:

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.component.html',
  styleUrls: ['./profile.component.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;
      }
    );
  }
}

回答4:

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.

来源：https://stackoverflow.com/questions/49187510/object-does-not-contain-such-a-member-angular-5

标签

javascript

typescript

angular5