Ralat NG0900 Ralat berlaku semasa cuba membandingkan. Hanya tatasusunan dan objek boleh lelar dibenarkan
P粉226667290
P粉226667290 2024-02-25 19:15:04
0
1
477

Menggunakan *ngFor saya dapat memberikan data tetapi ia membuang ralat ini

Ralat Ralat: NG0900: Ralat berlaku semasa cuba membandingkan '[objek Objek]'. Hanya tatasusunan dan objek boleh lelar dibenarkan

Ini kaedah servis saya

async getEditions(): Promise<Observable<Cigales>> {
    return this.http.get<Cigales>(url+"/candidates/editions", httpOptions).pipe(
      tap((getEditions: Cigales) => this.log('getEditions' + getEditions)),
      catchError(this.handleError<Cigales>('getEditions'))
    );
  }

Ini adalah kaedah komponen saya

editions: Cigale[] = [];

  async getEditions(): Promise<void> {
    await this.CigalesService.getEditions().then(res=> {
      res.subscribe(data => {
        this.editions = [];
        this.editions = data.content;
      })
    })
  }

Ini antara muka Cigales saya

export interface Cigales {
  content: Array<Cigale>,
  pageable: pageable,
  last: string;
  totalPages: string;
  totalElements: string;
  size: string;
  number: string;
  sort: sort;
  first: string;
  numberOfElements: string;
  empty: string;
}

export interface Cigale {
  id?: string;
  eventName: string;
  eventStartDate: string;
  eventEndDate: string;
}

type sort = {
  empty: boolean,
  sorted: boolean,
  unsorted: boolean
}

type pageable = {
  sort: sort,
  offset: string;
  pageNumber: string;
  pageSize: string;
  paged: string;
  unpaged: string;
}

Ini komponen saya.html

<tr *ngFor="let item of editions">
        <td>{{item.eventName}}</td>
        <td>{{item.eventStartDate}}</td>
        <td>{{item.eventEndDate}}</td>
        <td>
          <a class="d-inline" role="button" data-bs-toggle="modal" data-bs-target="#application-modal"><i class="bi bi-clipboard"></i></a>
          <a class="d-inline" role="button" data-bs-toggle="modal" data-bs-target="#application-modal"><i class="bi bi-pencil-square"></i></a>
        </td>
      </tr>

Console.log(this.editions) dan saya mendapat susunan dua objek

Hasil konsol

EDIT: Saya mencuba Array.isArray(this.editions) dan ia kembali benar

P粉226667290
P粉226667290

membalas semua(1)
P粉852578075

Pertama sekali, ralat yang anda hadapi adalah berkaitan dengan anda cuba menggunakan objek dan bukannya tatasusunan sebagai sumber data untuk arahan *ngFor.

Kedua, cuba berikan data kepada this.editions, sebagai contoh:

async getEditions(): Promise {
  await this.CigalesService.getEditions().then(res=> {
    res.subscribe(data => {
      this.editions= [...data.content];
    })
  })
}

Selain itu, saya mengesyorkan agar anda mengelak daripada menggunakan Promises dalam aplikasi Angular dan sebaliknya menjadikan kod anda lebih reaktif dengan memanfaatkan langganan.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan