data can not get from api in angular

the data that I get from api doesnt show in view. When I dont write *ngFor everything that I put in html tag is show but when I write *ngFor the image or anything that put in html tag is disappear .please help to find problem and sorry for bad English. And is the methods in api service must be have same name with methods in api that writh with django?

api service

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


@Injectable({
providedIn: 'root'
})
export class ApiService {
public APIUrl = "api.trickhub.ir";
constructor(private http: HttpClient) { }

getSamplesList(): Observable<any> {
return this.http.get<any>(this.APIUrl + '/samples');
}

getArticlesList(): Observable<any[]> {
return this.http.get<any>(this.APIUrl + '/articles');
}

getPlansList(): Observable<any[]> {
return this.http.get<any>(this.APIUrl + '/plans');
}

getContactList(): Observable<any[]> {
return this.http.get<any>(this.APIUrl + '/contact');
}

getAboutList(): Observable<any[]> {
return this.http.get<any>(this.APIUrl + '/about');
}

getArticleDetailsList(): Observable<any[]> {
return this.http.get<any>(this.APIUrl + '/articles/article_detail/id/slug');
}
}



nemoonekarha.component.html

<div class="container">
<div class="row">
<div class="box d-flex justify-content-center col-md-12 col-sm-12 mb-5 mt-5 kl">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" *ngFor="let item in samples">
<h3>{{item.title}}</h3>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>



nemoonekarha.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

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


constructor(private service: ApiService) { }

public samples: any;

ngOnInit(): void {
this.getSamples();
}

getSamples() {
this.service.getSamplesList().subscribe(data => {
this.samples = data;
});
}
}




and I add this config

proxy.conf.json

{
"/api/*": {
"target": "http://api.trickhub.ir",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}



and change environment to this

export const environment = {
production: false,
apiUrl: 'http://api.trickhub.ir'
};



but still nothing change and data doesn't show .

first image

second image

Continue reading...