角度文本插值（双大括号）不起作用，变量的值不显示

Question

我想显示学生的详细信息，但这些值未显示在应用程序上。

组件：

import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { ActivatedRoute } from '@angular/router';
import { StudentService } from '../student.service';

@Component({
  selector: 'app-student-details',
  templateUrl: './student-details.component.html',
  styleUrl: './student-details.component.css'
})
export class StudentDetailsComponent implements OnInit {

  id: number
  student: Student


  constructor(private route: ActivatedRoute,
    private studentService: StudentService){}

  ngOnInit(): void {
    this.id = this.route.snapshot.params['id'];

    this.student = new Student();
    this.studentService.getStudentById(this.id).subscribe(data =>{
      this.student = data;
    });
  }

}

HTML：

<div>
    <div *ngIf="student">
        <label><b>First Name: </b></label> {{ student.fName }}
    </div>
    <div>
        <label><b>Last Name: </b></label> {{ student.lName }}
    </div>
    <div>
        <label><b>City: </b></label> {{ student.city }}
    </div>
    <div>
        <label><b>Email: </b></label> {{ student.email }}
    </div>
</div>

学生班

export class Student {
    id: number;
    fName: string;
    lName: string;
    email: string;
    city: string;

}

结果： 在此输入图片描述

我检查了所有事情，一切似乎都很好，我重复了我多次遵循的教程，试图找出问题，但我什么也没发现。

Answer 1

当您在组件中声明它时，

student

不会被初始化。尝试在模板中使用问号以避免错误：

<div>
    <label><b>Last Name: </b></label> {{ student?.lName }}
</div>
<div>
    <label><b>City: </b></label> {{ student?.city }}
</div>
<div>
    <label><b>Email: </b></label> {{ student?.email }}
</div>