How to add the the result number to counter in angular-CodePudding

This is a counter (html-ts-css) who shows us the total account, and i have the information about total account from api rest, so i try to do *ngfor/*ngIf to show the total in the counter.

this is the total account : TotalAccount: 113460

counter.component.html:

<div id="population-counter">
    <div >

        <div >

            <div >

                <div >
                    0
                </div>

            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                ,
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                ,
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
            <div >
                <div >
                    0
                </div>
            </div>
        </div>
    </div>
</div>

counter.component.ts :

import { HttpClient } from '@angular/common/http';
import { ApiService } from './../api.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit {
  bourse: any;

  constructor(private apiService: ApiService ) {}
  

  ngOnInit() {
    this.getBourseNow();
  }

  getBourseNow() {
    this.apiService.getBourse().subscribe(res => {
      this.bourse = res;
      console.log(res)
    });
  }
}

I tried to convert the number to string and do a boucle but i don't know how

CodePudding user response：

You can use in your console.log(typeof(this.bourse)) to see what your variable is in the end.

After that i would change the bourse: any to the type that is returned by the subscription.

If its a string you can just use string interpolation in your html {{bourse}}

a subscription is an async function and your html will render before the result is there so you need in your html at your first <div *ngIf="!isLoading"> this can be a boolean in your component that is set to true and after your subscription is done you can set the boolean to false.

<div id="population-counter">
<div >

    <div *ngIf="!isLoading" >

        <div >

            <div >
                {{bourse}}
            </div>

        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            ,
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            ,
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
        <div >
            <div >
                {{bourse}}
            </div>
        </div>
    </div>
</div>

import { HttpClient } from '@angular/common/http';
import { ApiService } from './../api.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss']
})
export class CounterComponent implements OnInit {

  constructor(private apiService: ApiService) { }
  isLoading: boolean = true;
  bourse: any

  ngOnInit() {
    this.getBourseNow();
  }

  getBourseNow() {
    this.apiService.getBourse().subscribe((response) => {
      this.bourse = response;
    }, error => {
      console.log(error)
    }, () => {
      this.isLoading = false;
    })
  }
}

CodePudding user response：

<div id="population-counter">
    <div >
        <div *ngIf="!isLoading" >
            <div *ngFor="let b of bourse; let i = index" >
                <div >
                    {{i   1}} <!--if you want to print a single attribute of each bourse you can use {{b.name}} for example-->
                </div>
            </div>
        </div>
    </div>
</div>

this code will loop 113460 times and create the same div. i dont know what properties your bourse has but you can access these with {{b.key}}