html 模板中未显示Angular API响应数据

6fe3ivhb  于 2022-12-09  发布在  Angular
关注(0)|答案(2)|浏览(132)

我从后端获取类别并在表中显示它们。
问题是我的代码没有显示表中的任何数据。
getFournisseurs方法成功地从后端取得5个项目。为什么这对模板是不可见的?
Fournisseur模型

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

}

供应服务

export class FournisseurServiceService {

  constructor(private http: HttpClient) { }


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

appComponent.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>

输出there is 5 rows in fournisseur table
我想在模板中显示表fournisseur中的数据

hfsqlsce

hfsqlsce1#

请确保变更检测策略为默认值。

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

如果这不能解决您的问题,请共享API响应对象。

nvbavucw

nvbavucw2#

谢谢大家,我找到了我的问题的答案.在类fournisseur在后端我有这些属性:

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

以及前端的Fourniiseur模型

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

}

所以我把Frontend中每个属性的第一个字母都改成了miniscule,它起作用了。

相关问题