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>

错误：找不到类型为“对象-角度7”的其他支持对象“ [对象对象]”

1 个答案: