'Employee' only refers to a type, but is being used as a value here.ts(2693)-CodePudding

I am trying to create a variable of type Employee but it is showing an error of 'Employee' only refers to a type but is being used as a value here. ts(2693).

My show-api.ts code:-

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

interface Employee {
    Id: String;
    EmployeeName: String;
    StartTimeUtc: String;
    EndTimeUtc: String;
    EntryNotes: String;
    DeletedOn: String;
}


@Component({
selector: 'app-show-api',
templateUrl: './show-api.component.html',
styleUrls: ['./show-api.component.css']
})


export class ShowApiComponent implements OnInit {

li:any;
lis: any=[];


constructor(private http : HttpClient){
    
}

ngOnInit(): void {
    this.http.get('Api of my JSON file')
    .subscribe(Response => {

    
    if(Response){
        hideloader();
    }

    **employee: Employee[]=Response**;


    
    });
    function hideloader(){
    document.getElementById('loading')!.style.display = 'none';}
}}

data from API

[

{"Id": "aa",
"EmployeeName": "bb",
"StarTimeUtc": "cc",
"EndTimeUtc": "dd",
"EntryNotes": "ee",
"DeletedOn": null },

{"Id": "ff",
"EmployeeName": "gg",
"StarTimeUtc": "hh",
"EndTimeUtc": "ii",
"EntryNotes": "jj",
"DeletedOn": null },

]

Also, if this is not solvable, please tell me an alternative way to get data from JSON file.

CodePudding user response：

The problem is that you are not declaring the variable in the right way nor mapping Response to your interface.

ngOnInit(): void {
    this.http.get('Api of my JSON file')
    .subscribe(Response => {

    
    if(Response){
        hideloader();
    }

    //oldCode -> **employee: Employee[]=Response**;
    /* New code */ const employee: Employee[] = Response as Employee[];
    
    });
    function hideloader(){
    document.getElementById('loading')!.style.display = 'none';}
}}