Два дня назад я задал вопрос о ListView , но теперь я обнаружил, что основная проблема была не в просмотре списка, а в TabView.На старте, когда были созданы вкладки, все выглядит хорошо, но когда я нажимаю на кнопку, которая добавляет другую вкладку, она не работает правильно.Добавлена вкладка (в конце), а выбранный индекс вкладок равен 2, но содержимое предыдущей вкладки (индекс вкладки 1) исчезает.Но когда я перехожу к последней вкладке (индекс 3) и возвращаюсь к вкладке (индекс 1), содержимое там есть.
Вот фрагмент кода, где вы можете попробовать:
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
<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>
Проверено только на эмуляторе Android.
Дополнительный вопрос: можно добавить новую вкладку в качестве первой (для индексации)0)?
Большое спасибо за ваше время и за любой ответ.
РЕДАКТИРОВАТЬ: Этот код вы можете попробовать здесь
Или, возможно, лучший образец здесь