* ngFor 루프에 여러 값을 가질 수 있습니까?

Question

그래서 하나의 큰 중첩 배열 내에 여러 중첩 배열이 있고 중첩 배열의 각 요소는 그 세부 사항이있는 객체입니다.

이러한 값은 2D 행렬 (x 및 y)에서 여러 확인란에서 가져오고 각 x 및 y 선택에 대해 관련 세부 정보가 테이블 행 (해당 열에 있음)에 표시됩니다. 이러한 중첩 배열 보낸

이 코드는 다음과 같다, 이와 같이 I 여러 <TD> 년대를 따라서 중첩 된 어레이의 각 요소는 두 개의 행을 차지에

<tbody *ngFor='let blend of selectedBlends'> 
    <tr *ngFor='let bale of blend'/> 
    <td>{{ bale.number }}</td> 
    <td>{{ bale.weight }}</td> 
    <td>{{ bale.value }}</td> 
    </tr> 
</body> 

(에만 도시) 데이터를 별도로 표시합니다. 이는 내가 원하는 것입니다.

그러나 bale.weight의 행 1이 25이고 bale.weight의 2 행이 32라고 가정하면 다음 열에 bale.weight의 두 행을 추가로 표시해야합니다. 값이 함께 추가되어 다음 열에 표시됩니다.

어쨌든 * ngFor 루프의 현재 인덱스 위치에있는 개별 요소 값에 액세스 할 수 있습니까? 또는 아래 가능한 코드와 같은 것입니까?

<tr *ngFor='let bale1, bale2 in blends'/> 

이유

내가 하나 개의 큰 배열에 중첩 배열을 사용하고하면 같은 체크 박스 내 테이블에 데이터를 표시에서 제거를 클릭하면 확인하는 것입니다.

Answer 1

당신이 쓴 것을 바탕으로 나는 당신이하고있는 일을 이해하려고 노력했습니다. 이후 귀하의 데이터 구조를 보지 못했지만 나는 그것에 대해서도 짐작 했었지만 사용했던 데이터 구조를 제공 할 것입니다.

참고 :이 솔루션을 사용하려면 각 무게를 미리 계산하여 적절한 개체에 넣어야합니다. 내 예를 들어, 나는 단지 그것을 하드 코드했다.

업데이트 11/6/2017 : 원래 포스터의 요구 사항을 확인한 후 Typescript 파일이 업데이트되고 있습니다.

타이프 스크립트 파일 :

colNames = ['Number', 'Weight', 'Value', 'Total Weight']; 
selectedBlends = []; 

// scaffolded data that should reflect what is coming into the app 
incomingData = [ 
    { 
     bales: [ 
      { 
       number: 1, 
       weight: 10, 
       value: '$10' 
      }, 
      { 
       number: 2, 
       weight: 20, 
       value: '$20' 
      } 
     ], 
    }, 
    { 
     bales: [ 
      { 
       number: 5, 
       weight: 50, 
       value: '$50' 
      }, 
      { 
       number: 6, 
       weight: 60, 
       value: '$60' 
      } 
     ], 
    }, 
    { 
     bales: [ 
      { 
       number: 9, 
       weight: 90, 
       value: '$90' 
      }, 
      { 
       number: 10, 
       weight: 110, 
       value: '$110' 
      } 
     ], 
    } 
]; 

constructor() { 
    this.processBales(this.incomingData); // I am passing the scaffolded data here. Likely optional 
} 

processBales(incomingData: any) { 
    for (const data in incomingData) { 
     if (incomingData.hasOwnProperty(data)) { 
      this.createBalesObject(incomingData[data]); 
     } 
    } 
} 

createBalesObject (data) { 
    this.selectedBlends.push({ 
     bales: data.bales, 
     totalWeight: this.calculateTotalWeight(data.bales) 
    }); 
} 

calculateTotalWeight(bales) { 
    let totalWeight = 0; 
    for (const bale in bales) { 
     if (bales.hasOwnProperty(bale)) { 
      totalWeight += bales[bale].weight; 
     } 
    } 
    return totalWeight; 
} 

HTML 파일 : (나는 제거한 stylings가 간결에 대한 테이블의 화면 캡처를 만드는 데 사용)

<table> 
    <thead> 
    <tr> 
     <th *ngFor="let col of colNames"> 
     {{col}} 
     </th> 
    </tr> 
    </thead> 
    <tbody *ngFor="let blend of selectedBlends"> 
     <tr *ngFor="let bale of blend.bales; let index=index"> 
     <td>{{bale.number}}</td> 
     <td>{{bale.weight}}</td> 
     <td>{{bale.value}}</td> 
     <td> 
      <span *ngIf="index==1">{{blend.totalWeight}}</span> 
     </td> 
     </tr> 
    </tbody> 
</table> 

출력 표합니다 데이터의 두 행은 가중치를 합산하고이를 마지막 열에 표시합니다. 이것은 당신이이 질문에서 말하는 것이라고 생각합니다.

최종 참고 : 이 코드는 사용자의 표현을 기반으로, 한 번에 2 행으로 작업하는 것으로 가정합니다. 그렇지 않다면 *ngIf을 변경해야합니다. <span>