Angular 17 调用 API observable 和订阅时没有任何显示

Question

从事 Angular 17 项目，我正在尝试收回有

auctionParmas

或根本没有的拍卖。我可以在开发工具响应选项卡中看到数据值返回，但是当我 console.log

this.auctions

时，它会返回

undefined

。我必须在这里错过一个非常简单的步骤。该 URL 工作得很好，因为我可以在另一个浏览器选项卡中调用它

http://localhost:7001/api/auctions

。下图显示了开发工具中的响应选项卡。

从我最初发布此文章时起，我就一直在搞乱它，我可以

console.log(response);

并查看数据数组。每次当我到达 html 组件时，

*ngFor="let auction of auctions"

似乎不起作用。

拍卖界面

export interface Auction {
  reservePrice: number
  seller: string
  winner?: string
  soldAmount: number
  currentHighBid: number
  createdAt: string
  updatedAt: string
  auctionEnd: string
  status: string
  make: string
  model: string
  year: number
  color: string
  mileage: number
  imageUrl: string
  id: string
}

导出类 Auction 实现 Auction {}

分页界面：

export interface Pagination<T> {
  pageIndex: number;
  pageSize: number;
  count: number;
  data: T;
}

服务：

getAuctionsList(auctionParams: AuctionParams) {
  let params = new HttpParams();

  params = params.append('pageIndex', auctionParams.pageNumber);
  params = params.append('pageSize', auctionParams.pageSize);

  return this.http.get<Pagination<Auction[]>>(this.auctionUrl + 'auctions',{params});
}

成分：

export class AuctionListComponent implements OnInit {

  auctions: Auction[] = [];
  auctionParams = new AuctionParams();
  totalCount = 0;

  constructor(private auctionService: AuctionListService) { }

  ngOnInit(): void {
    this.getAuctions();
  }

  getAuctions() {
    this.auctionService.getAuctionsList(this.auctionParams).subscribe({
      next: response => {
         console.log(response); // shows data array in console
         this.auctions = response.data;
         console.log(this.auctions); // shows undefined
        this.auctionParams.pageNumber = response.pageIndex;
        this.auctionParams.pageSize = response.pageSize;
        this.totalCount = response.count;
      },
      error: error => console.log(error)
    })
  }
}

html 组件：

// In the browser nothing is showing below
<div class="m-3" *ngFor="let auction of auctions">

<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
        <img src="{{ auction.imageUrl }}" class="img-fluid rounded-start" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">{{ auction.year }} {{ auction.make}} {{auction.model}}</h5>
                <p class="card-text">High bid: {{ auction.currentHighBid }}</p>
                <p class="card-text">Milage: {{ auction.mileage }}</p>
                <p class="card-text">
                        End Date: {{ auction.auctionEnd | date }}    
                </p>                   
                                                            
                <app-timer [childTimer]="auction.auctionEnd"></app-timer>                                         
                
                <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>    
</div>

Answer 1

您的数组不在

response.data

中。尝试一下

this.auctions = response

。