CODEWITHSUNDEEP
arraysangulartypescript
Lalana Chamika
Lalana Chamika

Reputation: 615

How to output items from an array in angular

Im really new to angular. And I find that it is really hard to get an item from an array and output in the relevant html file in that component. The below code shows the onClick function of the bill-item.component.ts file

arr: Array<any> =[];
itemArray: Array<any> =[]; 

     onAddToBill(itemId:string, name:string , expireDate:string , quantity:string){

      this.itemArray.push([itemId,name,expireDate,quantity]);
      this.arr.push(this.itemArray);
      console.log(this.arr);

      }

And I need to output the item array on my bill-item.component.html which is shown below

                 <tbody>

                  <tr *ngFor="let itemArrays of arr">

                    <td *ngFor="let obj of itemArrays">{{obj[1]}}</td>
                    <td *ngFor="let obj of itemArrays">{{obj[0]}}</td>
                    <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                    <td *ngFor="let obj of itemArrays">{{obj[2]}}</td>
                    <td *ngFor="let obj of itemArrays">{{obj[3]}}</td>

                  </tr>

                </tbody>

The below image shows the item list when I add the first item

after adding one item

But after adding the second item , the item list shows like this The name of the item should be in a separate row not in the same row as first item

Here all the items gets add up to the same row , I want to get each item in separate row , line after line.

Then I tried the below code

           <tbody>
              <tr *ngFor="let entries of arr">
                <td>{{entries [1]}}</td>
                <td>{{entries [0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{entries [2]}}</td>
                <td>{{entries [3]}}</td>
              </tr>
            </tbody>

enter image description here

And this was the result. As ID has the entry[0] it was filled with all the instances in that array.

The below image shows my console.log(arr) result after adding 3 items enter image description here

enter image description here

Upvotes: 1

Views: 8690

Answers (4)

Dupdilan
Dupdilan

Reputation: 36

you can easily get values from "itemArray" rather than use "arr" and get the item details and print in table.

<table>
      <tr *ngFor="let x of itemArray">
          <td>{{x[0]}}</td>
          <td>{{x[1]}}</td>
      </tr>
</table>

like wise

Upvotes: 2

Shlok Nangia
Shlok Nangia

Reputation: 2377

you do not need to use *ngFor for each of entries as you are using array indexes like entries[1]

            <tbody>
              <tr *ngFor="let entries of arr">
                <td>{{entries [1]}}</td>
                <td>{{entries [0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{entries [2]}}</td>
                <td>{{entries [3]}}</td>
              </tr>
            </tbody>

I tried this above code with following value of arr

arr = [['a','b','c','d'],['a1','b1','c1','d1']]

and got the result as

1

Upvotes: 1

Parween Kelappan
Parween Kelappan

Reputation: 26

In td you are already accessing the items in the array, so you do not need to use *ngFor.

            <tbody>
              <tr *ngFor="let itemArrays of arr">
                <td>{{itemArrays[1]}}</td>
                <td>{{itemArrays[0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td>{{itemArrays[2]}}</td>
                <td>{{itemArrays[3]}}</td>
              </tr>
            </tbody>

Upvotes: 0

Kaustubh Khare
Kaustubh Khare

Reputation: 3510

There is no need for iterating itemArrays. You can directly access element using the index.

Remove *ngFor of each itemArrays on each row.

<tbody>

              <tr *ngFor="let itemArrays of arr">
                <td>{{itemArrays[1]}}</td>
                <td >{{itemArrays[0]}}</td>
                <td><input type="number" class="is-center" id="number" value="1" style="width: 50%;" /></td>
                <td >{{itemArrays[2]}}</td>
                <td>{{itemArrays[3]}}</td>

              </tr>

            </tbody>

Upvotes: 0

Related Questions