如何在Angular中读取静态json并填充评论部分？

[
  {
    "id": 1,
    "name": "John Doe",
    "comment": "This is a great article!"
  },
  {
    "id": 2,
    "name": "Jane Smith",
    "comment": "I learned a lot from this tutorial."
  }
]

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommentsService {
  private commentsUrl = 'assets/comments.json'; // JSON文件的路径

  constructor(private http: HttpClient) { }

  getComments(): Observable<Comment[]> {
    return this.http.get<Comment[]>(this.commentsUrl);
  }
}

import { Component, OnInit } from '@angular/core';
import { CommentsService } from './comments.service';

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

  constructor(private commentsService: CommentsService) { }

  ngOnInit(): void {
    this.commentsService.getComments().subscribe(comments => {
      this.comments = comments;
    });
  }
}

<div *ngFor="let comment of comments">
  <h3>{{ comment.name }}</h3>
  <p>{{ comment.comment }}</p>
</div>