2017-02-14 21 views
0
内の行を作成するための

私は、次の手順を実行して、単純なテーブルだろうと思ったものを作るしようとしています:私は作成したいテーブルのNativescript:* ngForループGridLayoutの

<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を置くために私に示唆されているが、それは勝ったとして、それは動作しません。最大のものを取る列の幅を3210に設定します。

私はこのような困難を持って私にこれを手伝うための例を見つけるのは驚きです。どんな助けもありがとう。

答えて

0

いくつかの提案 - 角度バインディング[row]="i"を使用してみることもできます(バインディングではなくコードの後ろにインデックスを+1する)。

でも、全体のアイデアは仮想化されたListViewで表現でき、out-of-boxとアイテムテンプレートのリサイクルをサポートします。ng構造ディレクティブよりも優れたパフォーマンスです。構造指示の代わりに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

関連する問題