错误：找不到类型为“object - Angular 7”的不同支持对象“[object Object]”[重复]

Question

angular创建的服务如下：

CheckTicket(barcode, codEspec, diaHoraEspec):Observable<Ticket[]>{
      //read ticket
      return this.http.get<Ticket[]>(`${this.checkticket_url}${barcode}?token=${this.token}&codEspec=${codEspec}&diaHoraEspec=${diaHoraEspec}`, httpOptions);
    }

此服务使用一个在控制台日志中返回以下响应的 API：

{Contador: 11111111, Barcode: "1111111111111", CodEspec: 11111, Espectaculo: "10º ANIVERSÁRIO", DiaHoraEspec: "2019-06-12T21:00:00", …}
Barcode: "1111111111111"
CodEspec: 11111
CodZona: 1111
Contador: 11111111
Desconto: 0
DiaHoraEspec: "2019-06-12T21:00:00"
Espectaculo: "10º ANIVERSÁRIO"
Lugar: "F-2"
Preco: 0
Zona: "Plateia"
__proto__: Object

我还有一个模型组件。 Ticket.ts

export class Ticket{
    Contador:number;
    Barcode:string;
    CodEspec:string;
    Espectaculo:string;
    DiaHoraEspec:Date;
    Zona:string;
    Lugar: string;
  }

负责使用此服务的“读取”组件。

read.component.ts 该组件正常工作返回正确的信息。

barcode:string;
codEspec:Number;
DiaHoraEspecs:string;

reads: Ticket[];

  constructor(private ticketlineservice: TicketlineService, 
    private activatedRoute: ActivatedRoute, private snackBar: MatSnackBar) {
      this.activatedRoute.queryParams.subscribe(params => {
        this.codEspec = params['CodEspec'];
        this.DiaHoraEspecs = params['DiaHoraEspecs'];
    });
     }

  ngOnInit() { }

onSubmit(){      
    this.ticketlineservice.CheckTicket(this.barcode, this.codEspec, this.DiaHoraEspecs).subscribe(reads => {
      this.reads = reads;
      console.log(reads);
    });

      if(this.reads != [] ){
        this.snackBar.open("Ticket valid!",'', {
          duration: 2000,
          verticalPosition: 'top',
          horizontalPosition: 'end',
          panelClass: ['snack-sucess'],
          });
        }else{
          this.snackBar.open("Ticket not found!",'', {
            duration: 2000,
            verticalPosition: 'top',
            horizontalPosition: 'end',
            panelClass: ['snack-error'],
            });
        }
}

read.component.html

这是一个列表元素，我想在其中显示 API 返回的响应以及提交条形码以执行服务的表单。

<div class="text-center">
      <form class="mt-3 text-center" (ngSubmit)="onSubmit()">
          <div class="text-center">
            <input type="text" maxlength="13" name="barcode" class="form-control text-center mt-2" [(ngModel)]="barcode" placeholder="Barcode"> 
          </div>
        </form>

  <div class="text-center">
    <ul class="list-unstyled my-2">
        <li class="btn w-100 bg-success text-center mx-0 my-2 display-block" *ngFor="let read of reads">
          <h3>Bilhete:</h3>
          <p class="h5"> Espetaculo: {{ read.Espectaculo }} </p>
          <p class="h5"> Lugar: {{ read.Lugar }} </p>
          <p class="h5"> Data: {{ read.DiaHoraEspec }} </p>
          <p class="h5"> Código Espetaculo: {{ read.CodEspec }} </p>
          <p class="h5"> Barcode: {{ read.Barcode }} </p>
        </li>
    </ul>
  </div>

问题： 所以每当我提交表单时，我都会收到以下错误：

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我知道我从 API 得到的答案是一个对象，但我想知道我是否可以将它变成一个数组。或者我应该把它当作一个对象。 我已经尝试删除 *ngFor="let read of reads" 并在列表元素中更改为 <p class="h5"> Espetaculo: {{ reads.Espectaculo }} </p> 但问题是在我提交表单之前返回错误 TypeError: Cannot read property 'Espectaculo' of undefined 并显示列表元素为空，我只想显示列表如果什么都找到了。

Answer 1

您可以在分配之前检查读取类型是否为数组

 this.ticketlineservice.CheckTicket(this.barcode, this.codEspec, this.DiaHoraEspecs).subscribe(reads => {
          if(Array.isArray(reads)){
              this.reads = reads;
          }
          else if(typeof reads === 'string' ){
              this.reads = null;
          }
          else{
               this.reads = [reads];
          }

          console.log(reads);
        });

把html改成

 <ul class="list-unstyled my-2">
        <li class="btn w-100 bg-success text-center mx-0 my-2 display-block" *ngFor="let read of reads">
          <h3>Bilhete:</h3>
          <p class="h5"> Espetaculo: {{ read?.Espectaculo }} </p>
          <p class="h5"> Lugar: {{ read?.Lugar }} </p>
          <p class="h5"> Data: {{ read?.DiaHoraEspec }} </p>
          <p class="h5"> Código Espetaculo: {{ read?.CodEspec }} </p>
          <p class="h5"> Barcode: {{ read?.Barcode }} </p>
        </li>
    </ul>