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

Posted 2023-02-22

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

【英文标题】：Error: Cannot find a differ supporting object '[object Object]' of type 'object - Angular 7 [duplicate]

【发布时间】：2019-10-27 02:33:43

【问题描述】：

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 并显示列表元素为空，我只想显示列表如果什么都找到了。

【参考方案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>

【讨论】：

它工作，只有一个问题，如果不存在它仍然返回“ticket Valid”并且console.log显示以下错误：Cannot read property 'Espectaculo' of null并返回reads为空。它还显示票证信息为空。

我更新了检查字符串类型的答案

同样的情况，reads 在控制台日志中为空，并且它返回错误ERROR TypeError: Cannot read property 'Espectaculo' of null 和这个：ERROR CONTEXT DebugContext_ view: …, nodeIndex: 4, nodeDef: …, elDef: …, elView: …。

如果你不介意的话，我怎么能隐藏html <ul> 元素以防reads 返回null 或者只显示reads 与null?

你可以在 ul 标签上使用 *ngIf 条件