[object][object] 类型为 object ngFor 角度错误答案

【问题标题】：[object][object] of type object ngFor error in angular[object][object] 类型为 object ngFor 角度错误
【发布时间】：2021-10-12 04:03:06
【问题描述】：

在 Angular 上工作并遇到错误。请检查代码并提出建议。错误错误：找不到“对象”类型的不同支持对象[object Object]。 NgFor 只支持绑定到Iterables 如Arrays。

'''
    import { Component, OnInit } from '@angular/core';
    import { FirstService } from '../first.service';
    
    import { FormControl } from '@angular/forms';
    
    import { Observable} from 'rxjs';
    import { map, startWith } from 'rxjs/operators';
    
    export interface faker {
      id? : number ;
      userId? : number;
      title? : string;
      completed? : boolean;
    }
    
    @Component({
      selector: 'app-autocomplete',
      templateUrl: './autocomplete.component.html',
      styleUrls: ['./autocomplete.component.css']
    })
    export class AutocompleteComponent implements OnInit {
      questionlist : faker[] ;
      myFormControl = new FormControl()
    
      constructor(
        private fservice : FirstService
      ) { }
    
    formControl = new FormControl();
      autoFilter: Observable<faker[]>;
    
      ngOnInit(): void { 
      
        this.fservice.getall().subscribe( 
          res => { this.questionlist = <faker[]>res;
          });
    
        this.autoFilter = this.formControl.valueChanges.pipe(
          startWith(''),
          map(value => this.mat_filter(value))
        );    
      }
    
      private mat_filter(value: string): faker[] {
        const filterValue = value.toLowerCase();
        return this.questionlist.filter(option => option.title.toLowerCase().indexOf(option.title.toLowerCase()) === 0)
      }  
      
    }
'''

还有 HTML 文件：

'''
    <mat-form-field style="width: 300px; margin: 50px auto; display: block;">
    
        <input type="text" placeholder="-------" matInput [formControl]="formControl" [matAutocomplete]="auto">
      
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          <mat-option *ngFor="let item of autoFilter" [value]="item.title">
            {{item.title}}
          </mat-option>
        </mat-autocomplete>
      
    </mat-form-field>
'''

注意：{{item.title}} 和 {{item}} [value]=item.title 和 [value]=item。我已经试过了。请说明为什么我会收到此错误

错误信息是： ERROR 错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到Iterables，比如Arrays。

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

请注意，autoFilter 是 Observable<faker[]>;，您不能迭代 Observable。所以你可能需要使用questionlist，它是faker的数组：

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
    <mat-option *ngFor="let item of questionlist" [value]="item.title">
         {{item.title}}
    </mat-option>
</mat-autocomplete>

【讨论】：

谢谢，这行得通

【解决方案2】：

正如错误消息所述，ngFor 仅支持 Array 等 Iterables，因此您不能将其用于 Object。可能是您尝试将autoFilter 迭代为Object 而不是Array。所以请确保autoFilter 是Array。

【讨论】：

【解决方案3】：

问题是您没有将 object 传递给 *ngFor

【讨论】：