Как определить GridLayout для приема динамических столбцов и строк в NativeScript - PullRequest
Новая
       17

Как определить GridLayout для приема динамических столбцов и строк в NativeScript

1 голос
/ 14 июня 2019

У меня есть две GridDatas и две кнопки в HTML. Когда пользователь нажимает 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>

Вот игра ссылка . Как мне определить мой GridLyout и отображать их динамически?

1 Ответ

0 голосов
/ 14 июня 2019

Я обновил вашу игровую площадку здесь .Добавьте это в 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>

и в yout .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;
    }
...