Angular api 響應數據未顯示在模板中

Question

我從后端獲取類別並將它們顯示在表格中。

問題是我的代碼沒有在表中顯示任何數據。

getFournisseurs 方法從后端成功獲取了 5 個項目。 為什么這對模板不可見？

model 美食家

export class Fournisseur {
IdFour ?: number ;
NomFour ?: string ;
AdresseFour ?: string ;
Email ?: string ;
TelFour ?: number ;

}

Fournisseur服務

export class FournisseurServiceService {


  constructor(private http: HttpClient) { }



  public GetFournisseur():Observable<Fournisseur[]>{
  return this.http.get<Fournisseur[]>('http://localhost:8081/Fournisseur/getAll')}

應用組件.ts

export class AppComponent implements OnInit{
  ngOnInit(): void {this.GetFournisseurs(); }
  public Fournisseurs !: Fournisseur[];

  constructor(private fournisseurService: FournisseurServiceService) { }

  public GetFournisseurs(): void{
    this.fournisseurService.GetFournisseur().subscribe(
      (response: Fournisseur[])=>{this.Fournisseurs = response;},
       (error:HttpErrorResponse)=>{alert(error.message);},
    )
  }

appComponent.html

<p>Hello angular !!!</p>
<hr>
<div *ngFor="let fournisseur of Fournisseurs">
  <li><p>{{fournisseur.Email}}</p></li>
</div>

output fournisseur表中有 5 行

我想在模板中顯示來自表 fournisseur 的數據

Answer 1

請確保ChangeDetectionStrategy是默認的。

@Component({
    selector: 'your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'],
    changeDetection: ChangeDetectionStrategy.Default
})

如果這不能解決您的問題，請分享 api 回復 object。

Answer 2

謝謝大家，我找到了問題的答案。 在后端的 class fournisseur 中，我具有這些屬性：

 private Long IdFour ;
 private String NomFour  ;
 private String AdresseFour ;
 private String Email  ;
 private int TelFour  ;

Model Fourniiseur in Front-end

  export class Fournisseur {
    IdFour ?: number ;
    NomFour ?: string ;
    AdresseFour ?: string ;
    Email ?: string ;
    TelFour ?: number ;

}

所以我將 Frontend 中每個屬性的首字母更改為 miniscule 並且它起作用了。