CODEWITHSUNDEEP
angular
Deepak Sahani
Deepak Sahani

Reputation: 31

How to pass array value in table which is inside ngFor?

I want to pass the array value in the table which is inside the ngFor directive.In below code you can see table row is add when select the option and the row are display,now in this row td I want to display the array value. 

export class GlComponent implements OnInit, AfterViewInit {
  select:number[]=[];
  carat:number[]=[];
  Arr = Array;
  ornament_name: Array<string> = [];

  constructor() { }

  ngOnInit() {
    this.select=[1,2,3,4,5,6];
    this.carat=[24,22,21,20,19,18];
    this.ornament_name["val1","val2","val3","val4","val5","val6"];
  }
  
  ngAfterViewInit(){}
  
  table_Toggle=true;
  selectMethod(value){
    this.tableToggle=false; 
  }
  }
<select name="select_no" [(ngModel)]="selectedvalue" (change)="selectMethod(index)">
  <option [ngValue]="p" *ngFor="let p of select;">{{p}}</option>
</select>

<form>
 <table class="table" [hidden]="tableToggle">
     <thead>
        <tr>
           <th>S.No</th>
           <th>Carat</th>
           <th>Weight (Gms)</th>
           <th>Loan Amount</th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let i of Arr(selectedvalue).fill(); let index=index;">
            <td>{{index+1}}</td>
            <td>
               <select name="select_carat" [(ngModel)]="carat_Value+carat_index">
                 <option [ngValue]="carat" *ngFor="let carat of carat;let carat_index = index;"> 
                 {{carat}}
                 </option>
               </select>
            </td>
            <td>
               <input type="number" class="form-control required" name="goldInGram" [(ngModel)]="[index].value" autocomplete="off" min="1" max="500">
            </td>
            <td *ngFor="let display_Value of ornament_name;let array_IN=index;">
               {{display_Value}}
            </td>
            </tr>
      </tbody>
   </table>
  </form>

I want to display the ornament_name array at the display_Value position, how can i do this?

Upvotes: 1

Views: 678

Answers (2)

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

<td>
    {{ornament_name[index]}}
</td>

Demo

Upvotes: 1

domiSchenk
domiSchenk

Reputation: 890

What you are doing now is adding a new table cell for each value in this array.
This means your table does not correspond with your table header.

I would suggest to do something like this:

<td>
  <ng-container *ngFor="let display_Value of ornament_name;let array_IN=index;">
    {{display_Value}}
  </ng-container>
</td>

Or if you want the value on each row use a div instead a ng-container

ng-container
This is a Angular specific component that does not render anything in html.

Upvotes: 0

Related Questions