Nativescript 动态添加标签到 TabView - 内容消失 [英] Nativescript add tab into TabView dynamically - content disappears

问题描述

两天前我问了关于 ListView 的问题，但现在我找到了核心问题不在于列表视图，而在于 TabView.在创建选项卡时，一切看起来都很好，但是当我点击添加另一个选项卡的按钮时，它无法正常工作.添加了选项卡(在末尾)并且选项卡的选定索引为 2，但前一个选项卡的内容(选项卡索引 1)消失了.但是当我转到最后一个标签(索引 3)并返回标签(索引 1)时，内容就在那里.

I asked two days ago question about ListView but now I find out the core problem wasn't about listview but the problem was in TabView. On the start when It was created tabs everything looks fine but when I Tap on button which add another tab it doesn't work correctly. Tab is added (on the end) and selected index of tabs is 2 but content of previous tab (tab index 1) disappears. But when I go to last tab (index 3) and back to tab (index 1) content is there.

这是您可以尝试的代码片段:

Here is the code snippet where you can try:

Home.component.ts

Home.component.ts

import { Component, OnInit, NgZone } from "@angular/core";
import { Page } from "tns-core-modules/ui/page/page";
import { ListView } from "ui/list-view"

@Component({
    selector: "app-home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    site = [{ "name": "cau 1", }, { "name": "cau 2" },
    { "name": "settings" }];

    tabSelectedIndex = 0;
    onItemTap(args) {
        this.ngZone.run(() => {
            this.site.push({ "name": "next" });
            this.tabSelectedIndex = 2;
        });
    }

    constructor(private ngZone: NgZone, private page: Page) {
    }

    ngOnInit(): void {
    }
    onTabChanged(args) {
        console.log("ahoj");
    }
}

Home.component.html

Home.component.html

<ActionBar title="YOUR APP"></ActionBar>
<GridLayout class="page">
    <TabView [(ngModel)]="tabSelectedIndex" height="100%" (selectedIndexChange)="onTabChanged($event)" class="content p-20">
        <ng-template ngFor let-item [ngForOf]="site">
            <StackLayout *tabItem="{title: item.name}">

                <Label row="0" col="0" [text]="test"></Label>
                <Button text="+" class="btn btn-active tmp" (tap)="onItemTap($event)"> </Button>
            </StackLayout>
        </ng-template>
    </TabView>
</GridLayout>

仅在安卓模拟器上测试.

Tested on android emulator only.

附加问题:是否可以首先添加新标签(索引 0)?

Additional question: It is possible to add new tab as first (to index 0)?

非常感谢您的时间和任何答复.

Thank you very much for your time and any answer.

您可以在here

或者更好的示例是这里

推荐答案

我创建了一个 nativescript 问题.答案是添加/删除选项卡视图项不是官方支持的操作，并且是该小部件的已知限制."这是该问题的链接.

I created a nativescript issue. Answer is " adding/removing tab view items are not officially supported operations and is a known limitation for that widget." Here is link for the issue.

这篇关于Nativescript 动态添加标签到 TabView - 内容消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！