How to generate div and display different data from array

October 31, 2022

I’m working on an angular project and I tried to use *ngFor to generate more divs and then display data from array with ngfor index

the code from the html file (numss=5)
`

<div class="admin-container" *ngFor="let x of numss">
    <div class="heading">Allocation Key Data</div>
    <form action="#" *ngIf="newAcc">        
        <div class="card-details" >
            <div class="card-box">
   <span class="details">Provider Account ID</span>
<input type="text"  placeholder="Provider Account ID [value]="newAcc.body.unitData[x].provider_account_id">
            </div>
            <div class="card-box">
                <span class="details">Percentage</span>
                <input type="text" placeholder="Percentage" [value]="newAcc.body.unitData[x].percentage">
            </div>
</div>
</form>

>Solution :

You have to adjust your code like that:

<div class="admin-container" *ngFor="let x of newAcc">
    <div class="heading">Allocation Key Data</div>
    <div class="card-details" >
        <div class="card-box">
            <span class="details">Provider Account ID</span>
            <input type="text"  placeholder="Provider Account ID" [value]="x.provider_account_id">
        </div>
        <div class="card-box">
            <span class="details">Percentage</span>
            <input type="text" placeholder="Percentage" [value]="x.percentage">
        </div>
    </div>
</div>

ngFor works like a foreach.

You also missed a " in placeholder="Provider Account ID".