कैसे प्राप्त करने के लिए सरणी डेटा रेंडर करने के लिए में html templete में कोणीय ngOnInit

मैं कोशिश कर रहा हूँ करने के लिए लाने की जानकारी से बैकएंड और यह कोणीय में घटकों. लेकिन मैं कर रहा हूँ यह दिलकश में ngOnInit पहली प्रतिपादन से पहले, लेकिन यह दिखा रहा है मेरे त्रुटि में कोणीय. यह मेरी घटक है । टीएस फ़ाइल

import { Component, OnInit } from '@angular/core';
import { UserService } from '../shared/user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor( private userService: UserService, private router: Router) { }

  userDetails = [];

  ngOnInit(): void {
    this.userService.getUserProfile().subscribe(
      (res:any)=>{
        this.userDetails = res['user'];
      },
      err=>{}
    );
  }

  onLogout(){
    this.userService.deleteToken();
    this.router.navigate(['/login']);
  }

}

यह मेरी component.html फ़ाइल

<table #ngIf="userDetails" class="table-fill">
    <thead>
        <tr>
            <th colspan="2" class="text-center">
                User Profile
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First Name</td>
            <td>{{userDetails.name}}</td>
        </tr>
        <tr>
            <td>Email</td>
            <td>{{userDetails.email}}</td>
        </tr>
        <tr>
            <td colspan="2" class="text-center">
                <input type="button" (click)="onLogout()" value="Logout">
            </td>
        </tr>
    </tbody>
</table>

यह त्रुटि मैं हो रही हूँ

Error: src/app/home/home.component.html:1:15 - error NG8003: No directive found with exportAs 'userDetails'.

1 <table #ngIf="userDetails" class="table-fill">
                ~~~~~~~~~~~

  src/app/home/home.component.ts:7:16
    7   templateUrl: './home.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.


Error: src/app/home/home.component.html:12:31 - error TS2339: Property 'name' does not exist on type 'never[]'.

12             <td>{{userDetails.name}}</td>
                                 ~~~~

  src/app/home/home.component.ts:7:16
    7   templateUrl: './home.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.


Error: src/app/home/home.component.html:16:31 - error TS2339: Property 'email' does not exist on type 'never[]'.

16             <td>{{userDetails.email}}</td>
                                 ~~~~~

  src/app/home/home.component.ts:7:16
    7   templateUrl: './home.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component HomeComponent.

मेरी मदद करो. मैं एक बहुत कोशिश की है लेकिन यह काम नहीं कर रहा है