角度 13 - 错误：尝试比较"[对象对象]"时出错。只允许数组和可迭代对象

Question

尝试diff'[object object]'时出错。只允许使用数组和可迭代项

我得到以下错误

错误：尝试区分"[对象对象]"时出错。仅阵列和允许迭代

我正在使用一个JSON响应，并试图在组合框的UI中显示它。请找到附件中的代码，让我知道我制作的代码中的错误是什么

以下是我接收时的错误和控制台时的数据。log

model.ts

export class FamilleProblem {
familleId!: number;
familleLibelle!: string;
}

service.ts

export class DeclarProblemService {
apiUrlFamille: string =  'https://www.mytds.fr/webservices_test/ws/gig/getFamille';
apiUrlType = 'https://www.mytds.fr/webservices_test/ws/gig/';
familleProblem!: Observable<FamilleProblem[]>;
currentUser!: AuthLoginInfo;
currentParc!: GestionParc;
familleId = null;
constructor(private http: HttpClient,
private tokenService: TokenStorageService,
private gestionParc: GestionParcService) { }

getFamille(): Observable<FamilleProblem[]>{
this.currentUser = this.tokenService.getUser();
let IdxUser = this.currentUser.userId;
let IdUser: string= '' + IdxUser;
this.currentParc = this.tokenService.getParc();
let IdxTypeMat = this.currentParc.materielIdxTypeMat;
let IdTypeMat: string= '' + IdxTypeMat;

let httpOptions = new HttpHeaders({'Content-Type': 'application/json',
'accept': 'application/json',
'LoginUser': IdUser,
'IdxTypeMat': IdTypeMat})
return this.http.get<FamilleProblem[]>(this.apiUrlFamille, {headers: httpOptions});

}

component.ts

export class DeclarProblemComponent implements OnInit {
currentUser = new AuthLoginInfo();
parcs!: GestionParc[];
materielCode!: number;
matrielImmat!: string;
mode!: number;
familleListe: FamilleProblem[] = [];
isLoggedIn= false;
errorMessage: any;
typeProblem: TypeProblem[] = [];
familleId!: number;

constructor(private router: Router,
private gestionParcService: GestionParcService,
private declarProblem: DeclarProblemService,
private tokenService: TokenStorageService) { }
ngOnInit(): void {
this.declareProbleme();  
}
declareProbleme(){
this.declarProblem.getFamille().subscribe({
next: (familleListe: any) => {
//this.tokenService.saveToken(data.accessToken);

this.familleListe = familleListe;
//this.familleListe = [];
console.log(this.familleListe);
//this.familleListe = Array.from(Object.values(res.data));
this.isLoggedIn = true;
},
error: err => {
this.errorMessage = err.error.message;
}
}); 
}

template.html

<div class="row">
<label class="col-sm-4 col--form-label">Problème constaté :</label> 
<div class="col-sm-8">
<select class="form-select" id="familleId"  name="familleId" >        
<option *ngFor="let famille of familleListe [value]="famille.familleId" > 
{{famille.familleLibelle}}  
</option>
</select>  
</div>          
</div>

Answer 1

最后的问题是，我使用了一个我们的名称来迭代，而服务器响应中的一个不是对象，而是数组。

Service.ts

getFamille(): Observable<FamilleProblem[]>{
let httpOptions = new HttpHeaders({'Content-Type': 'application/json',
'accept': 'application/json'
})
return this.http.get<{listeDesFamilles:FamilleProblem[]}>(this.apiUrlFamille, {headers: httpOptions}).pipe(
map(listeDesFamilles => listeDesFamilles.listeDesFamilles)

);