Question

为了使用Angular在nativescript中显示网格视图（4 * 4），我已按照npm网站中的示例集成了npm“nativescript-grid-view”。但是，它失败了。每当我在应用程序中输入该页面时，我都会收到错误。

错误：

System.err: Error: Expecting a valid View instance.

System.err：文件：“file：///data/data/com.domain.project/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js ，行：337，专栏：12

代码.ts文件

<GridLayout class="page">
            <GridView [items]="order" colWidth="30%" rowHeight="100">
              <ng-template let-item="item" let-odd="odd">
                <StackLayout margin="10" [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
                  <Label verticalAlignment="center" [text]="item.productName" class="list-group-item-text" textWrap="true"></Label>
                </StackLayout>
              </ng-template>
            </GridView>
          </GridLayout>

module.ts

    import { GridViewModule } from 'nativescript-grid-view/angular';
imports: [
        NativeScriptModule,
        NativeScriptHttpModule,
        NativeScriptUIDataFormModule,
        NativeScriptUIListViewModule,
        GridViewModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [Http]
            }
        }),
        ...SHARED_MODULES
    ],....

的package.json

 "tns-android": {
      "version": "3.0.1"
    },
    "tns-ios": {
      "version": "3.4.1"
    }
.....
 "typescript": "~2.2.0",....

有人问过这个问题在论坛下面，但没有人回复。

https://discourse.nativescript.org/t/dynamic-gridlayout-from-array-angular/1675

Answer 1

NativeScript 4X4 GridLayout

我已经在nativescript游乐场链接中编写了一些代码。 **

https://play.nativescript.org/?template=play-ng&id=a8UEDd

**

<GridLayout rows="*,*,*,*" columns="*,*,*,*">
        <Label text="1" row="0" col="0" borderColor="black" borderWidth="1"></Label>
        <Label text="2" row="0" col="1"  borderColor="black" borderWidth="1"></Label>
        <Label text="3" row="0" col="2"  borderColor="black" borderWidth="1"></Label>
        <Label text="4" row="0" col="3"  borderColor="black" borderWidth="1"></Label>
        <Label text="5" row="1" col="0"  borderColor="black" borderWidth="1"></Label>
        <Label text="6" row="1" col="1"  borderColor="black" borderWidth="1"></Label>
        <Label text="7" row="1" col="2"  borderColor="black" borderWidth="1"></Label>
        <Label text="8" row="1" col="3"  borderColor="black" borderWidth="1"></Label>
        <Label text="9" row="2" col="0"  borderColor="black" borderWidth="1"></Label>
        <Label text="10" row="2" col="1"  borderColor="black" borderWidth="1"></Label>
        <Label text="11" row="2" col="2"  borderColor="black" borderWidth="1"></Label>
        <Label text="12" row="2" col="3"  borderColor="black" borderWidth="1"></Label>
        <Label text="13" row="3" col="0"  borderColor="black" borderWidth="1"></Label>
        <Label text="14" row="3" col="1"  borderColor="black" borderWidth="1"></Label>
        <Label text="15" row="3" col="2"  borderColor="black" borderWidth="1"></Label>
        <Label text="16" row="3" col="3"  borderColor="black" borderWidth="1"></Label>
</GridLayout>

4x4 GridLayout的预览将是这样

Answer 2

下面的代码可以在不使用nativeoscript-grid-view的情况下工作。我认为nativescript版本是问题所在。

<ScrollView class="plansScroll" #plansScroll orientation="vertical" horizontalAlignment="center" width="100%">
    <WrapLayout orientation="horizontal" [id]="myIndex" (tap)="onPlanSectionTap($event)" class="plansScrollGrid m-5" #plansScrollGrid>
            <StackLayout *ngFor='let item of order; let myIndex = index' width="25%">
                    <!-- <Image [src]="item.imagePath" width="80"></Image> -->
                    <Image width="80" [src]="'~/assets/img/bratShop-overlay.jpg'"></Image>
                    <Label [text]='item.productName' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
                    <Label [text]='item.orderNumber' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
                    <Label [text]='item.orderStatus' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
                    <Label [text]='item.orderDate' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
            </StackLayout>
    </WrapLayout>

Answer 3

或者您可以使用nativescript-ui-listview及其ListViewGridLayout spanCount属性。此功能的官方文档为here。基本上，您可以执行以下操作：

<RadListView [items]="dataItems">
    <ng-template tkListItemTemplate let-item="item">
        <!-- item template here -->
    </ng-template>

    <ListViewGridLayout tkListViewLayout spanCount="4" scrollDirection="Vertical" ios:itemHeight="200" ></ListViewGridLayout>
</RadListView>

nativescript数据必须以4 * 4显示网格视图

3 个答案: