Angular无报错但页面无数据显示问题求助

我是Java和Angular新手，正在学习Angular入门课程。尝试在浏览器中展示信息，但页面始终无内容显示，且检查代码未发现报错（我对代码理解有限）。应用名称为facesnap，相关代码如下：

facesnap.models.ts #

export class FaceSnap {
  title!: string;
  description!: string;
  createDate!: Date;
  snaps!: number;
  imageUrl!: string;
  location?: string;
}

facensnaps.component.ts #

import { OnInit } from '@angular/core';
import { Input } from '@angular/core';
import { Component } from '@angular/core';
import { FaceSnap } from '../facesnap.models';

@Component({
  selector: 'app-facesnap',
  templateUrl: './facesnap.component.html',
  styleUrls: ['./facesnap.component.scss']
})
export class FacesnapComponent implements OnInit {
  @Input() facesnap!: FaceSnap;

  compter!: number;
  ngOnInit() {
  }

  onAddSnap() {
    if (this.compter < 1) {
      this.compter++;
      this.facesnap.snaps++;
    }
  }
}

app.component.ts #

import { Component, OnInit } from '@angular/core';
import { FaceSnap } from './facesnap.models';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  mySnap1!: FaceSnap;
  mySnap2!: FaceSnap;
  mySnap3!: FaceSnap;
 
  ngonInit() {
    this.mySnap1 = {
      title:"Senes",
      description:"Mon meilleur Ami Ennemi",
      createDate:new Date(),
      snaps: 256,
      imageUrl: "https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg",
      location: "Berlin"
    };
    this.mySnap2 = {
      title: "Blueno",
      description: "Le max",
      createDate: new Date(),
      snaps: 2254,
      imageUrl: "https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg",
      location: "München",
    };
    this.mySnap3 = {
      title: "Linda",
      description: "Best",
      createDate: new Date(),
      snaps: 93,
      imageUrl: "https://cdn.pixabay.com/photo/2015/05/31/16/03/teddy-bear-792273_1280.jpg",
      
    };
  }
}

app.component.html #

<app-facesnap [facesnap]="mySnap1"></app-facesnap>
<app-facesnap [facesnap]="mySnap2"></app-facesnap>
<app-facesnap [facesnap]="mySnap3"></app-facesnap>

facesnap.component.html #

<div class="face-snap-card">
  <h2>{{facesnap.title}}</h2>
  <p>Mis en ligne le {{ facesnap.createDate }}</p>
  <img [src]="facesnap.imageUrl" [alt]="facesnap.title">
  <p>{{ facesnap.description }}</p>
  <p *ngIf="facesnap.location"></p>
  <p>🤌 {{ facesnap.snaps }}</p>
  <p>
    <button (click)="onAddSnap()">Oh Snap!</button>
    🤌 {{ facesnap.snaps }}
  </p> 
</div>

当前页面显示效果：

问题原因及修复方案 #

1. 核心问题：生命周期方法名称错误

app.component.ts中，初始化方法写为ngonInit()，但Angular要求生命周期钩子必须是驼峰命名的ngOnInit()（注意大写的O）。这个错误导致初始化逻辑完全没执行，三个mySnap变量始终未定义，子组件接收不到数据，自然无法渲染内容。

修复：
修改app.component.ts中的方法名，并确保组件类实现OnInit接口：

export class AppComponent implements OnInit {
  mySnap1!: FaceSnap;
  mySnap2!: FaceSnap;
  mySnap3!: FaceSnap;
 
  ngOnInit() {
    // 原有初始化代码不变
  }
}

2. 点赞功能失效：计数变量未初始化

FacesnapComponent中的compter变量没有初始值，默认是undefined，执行onAddSnap()时this.compter < 1会判定为false，导致点赞逻辑不生效。

修复：
在FacesnapComponent的ngOnInit()中初始化compter：

ngOnInit() {
  this.compter = 0;
}

3. 模板空标签：location内容不显示

facesnap.component.html里的<p *ngIf="facesnap.location"></p>是空标签，即使有location值也不会显示内容。

修复：
修改为显示location内容：

<p *ngIf="facesnap.location">📍 {{ facesnap.location }}</p>

4. 可选优化：日期格式化

直接显示Date对象会输出原始格式，建议用Angular的DatePipe优化显示：

<p>Mis en ligne le {{ facesnap.createDate | date:'dd/MM/yyyy HH:mm' }}</p>

确保所在模块（如AppModule）已导入CommonModule（默认已导入）。

内容的提问来源于stack exchange，提问作者Ander Gills