problem with displaying data using *ngFor Angular

Question

I have problem with displaying data using *ngFor:

Auction object contains array of Bids.

export interface Auction {

  descripton: string;
  sellerId: string;
  title: string;
  price: number;
  quantity: number;
  bids: Bid[];
  boughtByList: string[];
  photoAlbum: PhotoAlbumModel;
  auctionType: string;
  starts: Date;
  ends: Date;
  comments: Comment[];

}

export class Bid {

  constructor(public amount: number, public userName: string, public productTitle: string) {
  }
}

I getting auction data in AuctionDetailsComponent

export class AuctionDetailsComponent implements OnInit, OnDestroy {

  private title: string;
  auction: Auction;
  bid: Bid;
  bidResponse: BidResponse;
  highestBid: number;
  coins: number;
  private paramsSubscription: Subscription;


  imageObjects: Array<object> = [];

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute,
              private productService: ProductService,
              private cartService: CartService,
              private authService: AuthenticationService,
              private auctionService: AuctionService) {
  }

  ngOnInit(): void {
    this.paramsSubscription = this.activatedRoute.params
      .subscribe((params: Params) => {
        this.title = params.title;
        this.getAuction(this.title);
      });
  }


  getAuction(title: string) {
    this.auctionService
      .get(title)
      .subscribe((auction) => {
        this.auction = auction;
        this.setImageObject();
      });
  }

In auction-details.component.html I try to display Bid data using *ngFor

<div *ngFor="let bid of auction.bids">
  <p>{{bid.userName}}</p>
</div>

Paragraphs are empty but in chrome debug there is a array.

and other Auction data - title, price displaying fine.

I don't know where is the problem.

Could not reproduce with the given infos. Could you create a reproduction on stackblitz? Did you try to use the chrome elements inspector to check if the p tag for the userName is there? — Mehyar Sawas
– Mehyar Sawas, Commented Nov 6, 2022 at 20:29
Then it would be best to make a stackblitz example, to get a quick solution — Mehyar Sawas
– Mehyar Sawas, Commented Nov 7, 2022 at 18:59

Ajmal Rasheed · Accepted Answer · 2022-11-07 07:57:20Z

1

There is an issue of Async Await. Make sure to load the data before showing it on Angular app. Also, I think you can ngOnChanges lifecycle hook to load data after page is loaded.

answered Nov 7, 2022 at 7:57

Ajmal Rasheed

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

wesky77 Over a year ago

Can you tell me a little more ? I mostly programming in Java and I only try to show results using Angular and I don't know where to start.

Ajmal Rasheed Over a year ago

Use Async as mentioned in your first answer. Use async on ngOninit hook as mentioned.

Eli Porush · Accepted Answer · 2022-11-07 09:21:31Z

1

avoid subscribing to the Observable inside .ts file, instead use async pipe, try to write it like this:

  async ngOnInit(): void {
    const params = await lastValueFrom(this.activatedRoute.params);
    this.title = params.title;
    this.action$ = this.auctionService.pipe(tap(() => this.setImageObject()))
  }

and then in the template you can use async pipe

<div *ngFor="let bid of (auction$ | async)?.bids">
 <p>{{bid.userName}}</p>
</div>

good luck :)

edited Nov 7, 2022 at 9:21

answered Nov 6, 2022 at 20:33

Eli Porush

1,5772 gold badges11 silver badges20 bronze badges

4 Comments

wesky77 Over a year ago

Can you explain me a little more ? It's not about imageObject - I can't display Auction Bids.

wesky77 Over a year ago

when I try this I have an error : Property 'title' does not exist on type 'Observable '.

Eli Porush Over a year ago

my bad, I correct my answer

wesky77 Over a year ago

when I try like this ngOnInit() won't call async ngOnInit(): Promise<void> { const params = await lastValueFrom(this.activatedRoute.params); this.title = params.title; this.auction$ = this.auctionService.get(this.title); }

wesky77 · Accepted Answer · 2022-11-07 08:59:16Z

As far I understand when I init html Auction isn't

  ngOnInit(): void {
    this.paramsSubscription = this.activatedRoute.params
      .subscribe((params: Params) => {
        this.title = params.title;
        this.getAuction(this.title);
        console.log(this.getAuction(this.title)); // undefined 
      });
  }

getAuction(title: string) {
    this.auctionService
      .get(title)
      .then((auction) => {
        this.auction = auction;
        this.setImageObject();
      });
  }

I tried to change getAuction to async function but problem is still there.

async get(title: string): Promise<any> {
    return this.http
      .get<Auction>(this.AUCTION_URL + title, this.getAuth()).toPromise();
  }

wesky77 · Accepted Answer · 2022-11-07 09:41:51Z

0

I tried like this but ngOnInit() don't start

async ngOnInit(): Promise<void> {
    const params = await lastValueFrom(this.activatedRoute.params);
    this.title = params.title;
    this.auction$ = this.auctionService.get(this.title);
  }

enter image description here

answered Nov 7, 2022 at 9:41

wesky77

132 bronze badges

Comments

wesky77 · Accepted Answer · 2022-11-07 10:17:27Z

0

For loop don't work but when I try like this.

 <div>
      <p>{{this.bids[0].userName}}</p>
   </div>

it's display value.

answered Nov 7, 2022 at 10:17

wesky77

132 bronze badges

1 Comment

Kevon Over a year ago

I don't think you intended this to be considered an answer. Consider editing the initial question with additional details instead

Collectives™ on Stack Overflow

problem with displaying data using *ngFor Angular

5 Answers 5

2 Comments

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related