Nativescript w/NG2 : * ngFor 루프는 GridLayout과의 행을 만들 수

Question

나는 다음을 수행하여 나는 간단한 테이블이 될 것이라고 생각 무엇을 만들려고 노력하고 있어요 : 내가 만들고 싶은 테이블의

<GridLayout rows="auto" columns="*,*,auto" width="100%" class="table-body"> 
    <Label col="0" row="0" text="Date"></Label> 
    <Label col="1" row="0" text="Previous Owner"></Label> 
    <Label col="2" row="0" text="Price" horizontalAlignment="center"></Label> 
    <template *ngFor="let sale of history; let i = index"> 
    <Label col="0" row="{{i+1}} [text]="sale.saleDate"></Label> 
    <Label col="1" row="{{i+1}} [text]="sale.username"></Label> 
    <Label col="2" row="{{i+1}} [text]="sale.price" horizontalAlignment="center"></Label> 
    </template> 
</GridLayout> 

샘플 :

이 코드는 작동하지 않습니다하지만 나는 내가 나에게 GridLayout과 태그 내부의 *ngFor을 넣어,이 제안되었다 할 것을 시도하고 보여줍니다 생각 만 원으로 그 작동하지 않습니다 가장 큰 걸릴 sale.price을 눌러 열 너비를 지정합니다.

나는이 일을 돕기 위해 모든 어려움을 겪고있는 것에 놀랐다. 어떤 도움을 주시면 감사하겠습니다.

Answer 1

몇 가지 제안 - 각도 바인딩 [row]="i"을 사용하여 시도해 볼 수 있습니다 (바인딩에서 코드가 아닌 코드에서 색인 +1 증가).

그래도 전체 아이디어는 가상화 된 ListView으로 표현할 수 있으며 out-fo-the-box 및 항목 템플릿을 재활용 할 수 있습니다. 구조 지시문보다 우수한 성능을 제공합니다. 구조 지시문 대신 ListView를 선호하는 이유는 잘 설명되어 있습니다. here

https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/release/app/common-screens-category/lists-category/multi-line-grouped/multi-line-grouped.component.html