如何获取数组数据以在 Angular ngOnInit 的 html 模板中呈现答案

【问题标题】：How to get array data to render in html templete in Angular ngOnInit如何获取数组数据以在 Angular ngOnInit 的 html 模板中呈现
【发布时间】：2021-12-30 20:55:33
【问题描述】：

我正在尝试从后端获取信息并将其显示在 Angular 组件中。但是我在渲染之前首先在 ngOnInit 中获取它，但它显示了角度错误。这是我的 component.ts 文件

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.

帮帮我。我已经尝试了很多，但它不起作用

【问题讨论】：

应该是 *ngIf="userDetails" 而不是 #ngIf="userDetails"，将 # 替换为 *
我已经替换了它，但它仍然向我显示这个错误属性 'name' does not exist on type 'never[]' for the name and email
如果你访问的是 userDetails.name，那意味着 userDetails 不是一个数组。那么请不要定义为数组，定义为userDetails；或 userDetails = "";并在 html 中检查 *ngIf="userDetails.name"

标签： html node.js angular http router

【解决方案1】：

您正在将 userDetails 作为对象访问。所以，替换

userDetails = [] as userDetails:any;

【讨论】：