Angular 13 - Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Question

尝试区分“[object Object]”时出错。只允许数组和可迭代对象

我收到以下错误

Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

我正在使用 JSON 响应并尝试将其显示在 ComboBox 的 UI 中。请找到附加的代码，让我知道我所做的代码中的错误是什么

here are the errors when I receive and the data when I do console.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)
                     
      );

Angular 13 - Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

Angular 13 - Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

angular12