如何在ngFor内部的表中传递数组值？

Question

我想在ngFor指令内部的表中传递数组值。在下面的代码中，您可以看到选择选项并显示行时添加了表行，现在我要在该行td中显示数组值。

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>

我想在display_Value上显示ornament_name数组位置，我该怎么做？

Answer 1

您现在正在为该数组中的每个值添加一个新的表格单元格。这意味着您的表与表头不对应。

我建议做这样的事情：

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

或者如果您希望每行的值都使用div而不是ng-container

ng-container这是一个特定于Angular的组件，不会在html中呈现任何内容。

Answer 2

如果没有计算，则可以像这样在单个td中将它们显示为逗号分隔的值：

<td>
    {{ornament_name.join()}}
</td>

Demo