Consume online API in Angular - html

Question

I am learning Angular and trying to consume an online web API in which I have app.module.ts, a service file, a model named comments, app.component.ts and app.component.html files
I am trying to show posts in my browser from the online web API from https://jsonplaceholder.typicode.com/posts/1/comments URL.
My code compiles successfully, but doesn't show any data in the browser and I can't find any errors. I am working in Angular 8/9. My code is below.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule } from '#angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FreeapiService } from './services/freeapi.service';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [FreeapiService],
bootstrap: [AppComponent]
})
export class AppModule { }
freeapi.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { Observable } from 'rxjs';
#Injectable({
providedIn: 'root'
})
export class FreeapiService {
constructor(private http: HttpClient) { }
getComments(): Observable<any> {
return this.http.get("https://jsonplaceholder.typicode.com/posts/1/comments")
}
}
Comments Class
export class Comments {
postId: number;
id: number;
name: string;
email: string;
body: string;
}
App.component.ts
import { Component, OnInit } from '#angular/core';
import { FreeapiService } from './services/freeapi.service';
import { Comments } from './classes/comments';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-apicall';
constructor(private _freeApiService: FreeapiService) { }
istComments: Comments[];
ngOnInt() {
this._freeApiService.getComments()
.subscribe
(
data => {
this.istComments = data;
}
);
console.log("This is working");
}
}
This my app.component.html file in which I want to show data in a table, but only show header
<table>
<tr>
<th>ID</th>
<th>Post Id</th>
<th>Name</th>
<th>Email</th>
<th>Body</th>
</tr>
<tr *ngFor="let com of istComments">
<td>{{com.id}}</td>
<td>{{com.postId}}</td>
<td>{{com.name}}</td>
<td>{{com.email}}</td>`enter code here`
<td>{{com.body]}</td>
</tr>
</table>
What am I missing?