Question

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

ts

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并动态显示它们？

Answer 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;
    }

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

1 个答案: