Api request not showing results *ngFor *ngIf - html

Question

I need to show the data I'm fetching, but none is showing, I tried ngIf and ngFor
I'm using angular 6, and trying to display data from movies in the Html, but data seems to be empty, I tried a lot of solutions but none seems to work.
<app-logo></app-logo>
<app-options></app-options>
<div style="display:none;" id="root"></div>
<div class="col s6">
<button routerLink="/halfhour" (click)=searchData() class="options" id="menos-30-min" value="25 min">Menos de 30 min</button>
</div>
<div *ngIf="data?.data">
<ng-container *ngFor="let data of data">
<div class="row">
<div class="col s5">
<img class="backgrounds" src="{{data?.Poster}}">
<div class="background" style="background-image: url({{data?.Poster}}); background-size: cover; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; height:300px; width: 100%;"></div>
</div>
<div class="col s7">
<div class="information">
<p class="title">Title: {{data?.Title}}</p>
<p class="runtime">Runtime: {{data?.Runtime}}</p>
<p class="other-data">Year: {{data?.Year}}</p>
<p class="other-data"> Genre: {{data?.Genre}}</p>
<p class="resumen"> Plot: {{data?.Plot}}</p>
<p class="other-data"> Tipo: {{data?.Type}}</p>
</div>
</div>
</div>
</ng-container>
</div>
<h1>{{id}}</h1>
#Component({
selector: 'app-half-hour',
templateUrl: './half-hour.component.html',
styleUrls: ['./half-hour.component.css']
})
export class HalfHourComponent implements OnInit {
constructor(private http: Http) {
}
data: any [];
id;
getRandom() {
const omdbData = ['0386676', '1865718', '0098904', '4508902', '0460649', '2861424', '0108778', '1305826', '0096697', '0149460'];
const randomItem = omdbData[Math.floor(Math.random() * omdbData.length - 1) + 1];
return this.id = randomItem;
}
searchData() {
this.getRandom();
this.http
.get('https://cors-anywhere.herokuapp.com/http://www.omdbapi.com/?i=tt' + this.id + '&apikey=')
.pipe(map((res: Response) => res.json()))
.subscribe(data => {
this.data = Array.of(this.data);
console.log(data);
console.log(this.id);
});
}
ngOnInit() {
}
}
The properties of data show as empty.

Answer 1

HTTP request call should be added inside ngOninit(). Here is the updated code
ngOnInit(){
this.data = [];
this.getRandom();
this.http
.get('https://cors-anywhere.herokuapp.com/http://www.omdbapi.com/?i=tt' + this.id + '&apikey=')
.pipe(map((res: Response) => res.json()))
.subscribe(data => {
this.data = (data) ? data.slice() : [];
console.log(data);
console.log(this.id);
});
}