国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

錯誤 NG0900 嘗試比較時發(fā)生錯誤。僅允許數(shù)組和可迭代對象
P粉226667290
P粉226667290 2024-02-25 19:15:04
0
1
886

使用 *ngFor 我能夠渲染數(shù)據(jù),但它會拋出此錯誤

錯誤 錯誤:NG0900:嘗試比較「[object Object]」時發(fā)生錯誤。僅允許數(shù)組和可迭代物件

這是我的服務(wù)方法

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'))
    );
  }

這是我的元件方法

editions: Cigale[] = [];

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

這是我的 Cigales 介面

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;
}

這是我的 component.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) 和我得到兩個物件的陣列

控制臺結(jié)果

編輯:我嘗試過 Array.isArray(this.editions) 並且它回傳 true

P粉226667290
P粉226667290

全部回覆(1)
P粉852578075

首先,您面臨的錯誤與您嘗試使用物件而不是陣列作為 *ngFor 指令的資料來源有關(guān)。

其次,嘗試將資料指派給 this.editions,例如:

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

此外,我建議您避免在 Angular 應(yīng)用程式中使用 Promise,而是透過利用訂閱使程式碼更具反應(yīng)性。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板