[对象][对象] 类型对象 ngFor angular 中的错误

Question

正在处理 Angular 并收到错误。请检查代码并提出建议。错误错误：找不到类型 'object' 的不同支持对象 [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。我已经试过了。请建议我为什么会收到此错误

错误信息是：错误错误：找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables 例如数组。

Answer 1

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

Answer 2

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

Answer 3

请注意 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>

[对象][对象] 类型对象 ngFor angular 中的错误

[object][object] of type object ngFor error in angular

typescript

angular-material

angular