如何定义 GridLayout 以接受 NativeScript 中的动态列和行答案

【问题标题】：How to define GridLayout to accept dynamic cols and rows in NativeScript如何定义 GridLayout 以接受 NativeScript 中的动态列和行
【发布时间】：2019-06-14 05:15:23
【问题描述】：

我在 html 中有两个 GridData 和两个按钮。当用户按下 Button1 时，我想显示 gridData1，当按下 Button2 时，我想显示 gridData2。在这里，行和列不是动态的。

gridData1 = [
        { label: 'Grid1_Label1', id: '-1' },
        { label: 'Grid1_Label2', id: '-2' }
    ];

    gridData2 = [
        { label: 'Grid1_Label1', id: '-1', extraProperty: 'Grid1_Label1_Extra1' },
        { label: 'Grid1_Label2', id: '-2', extraProperty: 'Grid1_Label1_Extra2' }
    ];

onButton1Tap(): void {
        console.log("Button1 was pressed");
    }

    onButton2Tap(): void {
        console.log("Button2 was pressed");
    }

html

<StackLayout>
    <Button text="Button1" (tap)="onButton1Tap()"></Button>
    <Button text="Button2" (tap)="onButton2Tap()"></Button>
    <GridLayout>
        <!--How should I implement here ?-->
    </GridLayout>
</StackLayout>

这里是游戏link。如何定义我的 GridLyout 并动态显示它们？

【问题讨论】：

您的问题似乎太宽泛了。您在 gridData1 和 gridData2 上的数据格式不同，并且不知道您可能希望如何格式化行/列或屏幕上可能需要的所有信息，或者当您可以堆叠项目数组时为什么甚至需要 GridLayout。
我只想以表格方式在屏幕上显示 json 数据。如果不是 GridLayout，我可以使用其他布局，但唯一的问题是 json 属性将由按钮单击决定。
面对我有 9 个报告要显示在屏幕上，所以我打算使用一种布局而不是点击事件而不是点击事件，而不是创建 9 个物理布局。

标签： angular nativescript angular2-nativescript

【解决方案1】：

我已经更新了你的游乐场here。在你的html中添加这个

<StackLayout >
<Button text="Button1" (tap)="onButton1Tap()"></Button>
<Button text="Button2" (tap)="onButton2Tap()"></Button>
<GridLayout rows="{{genRows()}}" [columns]="genCols()" height="400" width="400">
    <!--How should I implement here ?-->
    <Label *ngFor="let item of gridData; index as i; " row="{{item.row}}"
        col="{{item.col}}" text="{{item.label}}"></Label>
</GridLayout>

在你的 .ts 中

cols = '*';
    rowsCount = "*";

    gridData1 = [
        { label: 'Grid1_Label1', id: '-1', row: '0', col: '0' },
        { label: 'Grid1_Label2', id: '-2', row: '1', col: '0' },
        { label: 'Grid1_Label3', id: '-1', row: '2', col: '0' },
        { label: 'Grid1_Label4', id: '-2', row: '3', col: '0' }
    ];

    gridData2 = [
        { label: 'Grid1_Label1', id: '-1', extraProperty: 'Grid1_Label1_Extra1' },
        { label: 'Grid1_Label2', id: '-2', extraProperty: 'Grid1_Label1_Extra2' }
    ];

    constructor() {
    }

    genRows() {
        for (let i = 1; i < this.gridData1.length; i++) {
            this.cols += ",*";

        }
        return this.cols;
        // console.log(this.cols);
    }

    genCols() {
        for (let i = 1; i < this.gridData1.length; i++) {
            this.rowsCount += ",*";

        }
        return this.rowsCount;
    }

【讨论】：

在button2点击时，"ngFor="let item of gridData1;"需要改为gridData2。
点击按钮更改this.gridData = this.gridData1;
并且不要忘记在按钮点击时重置rowsCount 和cols。 play.nativescript.org/?template=play-ng&id=l31Dpj&v=4
您的示例使用 text="{{item.label}}" 工作正常，而如果您看到我的 gridData2，我还有另外 3 个字段要显示。那么当属性名称和列数是动态的时，我应该在 text="{{item.???}}" 中写什么？
代替 row: '0'，我可以使用索引值。但是 col: '0' 不适用，因为我应该显示所有属性。