Parsing API result to model in Angular5

Question

Below is my Angular Component with A POST API

import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpParams, HttpHeaders} from '@angular/common/http';
import {Response} from '@angular/http';
import {Router} from "@angular/router";
import {Observable} from "rxjs/Observable";
import {ILogin} from "../interfaces/ILogin";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string="";
  password: string="";
  loginBtnText: string='Log In';
  clearBtnText: string='Reset Fields';
  message:string;
  cssClass:string;
  LoginDetail:ILogin[]=[];
  constructor(private http:HttpClient ) { }
  ngOnInit() {
  }
  checkLogIn(){     
    if(this.username.length>0 && this.password.length>0)
    {
    var params=[{
      "ActionMethod":"CheckLogin",
      "StaffCode":this.username,
      "Password":this.password
    }]
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };

    this.http.post<ILogin []>("http://localhost:57863/api/MyApp/",
    params,httpOptions
    )
    .subscribe((data:ILogin[])=> {
      //console.log(data);
      this.LoginDetail= data;
    }
    ,
    error => 
     {
       alert("Error ! Try After Some Time");
      }
    );
    console.log(this.LoginDetail);
    debugger;
  }
  else{
      this.message="Some Fields are Empty";
      this.cssClass="text-danger";
  }
  }
}

After API Call I am getting data but I am not able o use it like I used to do it in Jquery or Angular JS like below snippet

data.Result[0].Id

Since Angular 5 Work with TypeScript so I created an Interface with properties same as my result

export interface ILogin {
    Id:number;
    UserId:number;
    UserName:string;
    UserEmail:string;
    UserPassword:string;
    UserRole:string,
    CreatedDate:DateTimeFormat;
    IsActive:string;
    Otp:number;
    OtpdateStamp:DateTimeFormat;
    ImagePath:string;
    Status:string;
    Message:string;
}

But how can I use it for furthur calculation . I tried to put result in variable of Type ILogin[]

LoginDetail:ILogin[]=[];

and in API Call

.subscribe((data:ILogin[])=> {
      //console.log(data);
      //debugger;
      this.LoginDetail= data;

    }

Why cant I use

this.LoginDetail.Id
this.LoginDetail.UserId

When I print this.LoginDetail in console , its empty How to parse API result to a model

I am a Ap.Net Core Developer , Started Working on Angular 5 , In ASP.Net Core We Create a Model Class to hold data , Why we use Interface For this in Angular 5 , a normal class wont work ? if do than what's the difference in using interfaces or class here

Answer 1

Your code is OK. Your request to the API is asynchronous so your result data is available only at the subscribe function, but you have logged it after the subscribe function. Log in the function and you will get the desired result. But you can still use that property in the template, because Angular detects the change of the variable and runs change detection.

.subscribe((data:ILogin[])=> {
   this.LoginDetail = data;
   console.log(this.LoginDetail); // is available here.
}

// is NOT available here