NativeScript / NativeScript/angular
TabView not rendering
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 55
- Forks
- 13
- Ø Merge
- 16 Min.
- Gemergte PRs (30 T.)
- 1
Beschreibung
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
{
"name": "stackblitz-nativescript-angular",
"main": "./src/main.ts",
"version": "1.0.0",
"private": true,
"dependencies": {
"@angular/animations": "~19.0.0",
"@angular/common": "~19.0.0",
"@angular/compiler": "~19.0.0",
"@angular/core": "~19.0.0",
"@angular/forms": "~19.0.0",
"@angular/platform-browser": "~19.0.0",
"@angular/platform-browser-dynamic": "~19.0.0",
"@angular/router": "~19.0.0",
"@nativescript/angular": "^19.0.0",
"@nativescript/core": "~8.8.0",
"rxjs": "~7.8.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~19.0.0",
"@angular/compiler-cli": "~19.0.0",
"@nativescript/preview-cli": "^1.0.14",
"@nativescript/stackblitz": "^0.0.8",
"@nativescript/tailwind": "^2.1.0",
"@nativescript/types": "~8.8.0",
"@nativescript/webpack": "~5.0.0",
"@ngtools/webpack": "~19.0.0",
"tailwindcss": "~3.4.0",
"typescript": "~5.6.0"
}
}
Describe the bug
Adding TabView UI component doesn't render on the page.
To Reproduce
Start new project by following the docs: https://docs.nativescript.org/tutorials/build-a-master-detail-app-with-angular. or use this stackblitz:
https://stackblitz.com/edit/nativescript-stackblitz-templates-t6bujanb?file=src%2Fapp%2Fitem%2Fitems.component.html,src%2Fapp%2Fitem%2Fitems.component.ts,src%2Fapp%2Fapp.routes.ts&title=NativeScript%20Starter%20Angular
Modify items.component.html
<ActionBar title="My App"> </ActionBar>
<GridLayout>
<TabView>
<TabViewItem title="First">
<Label
text="First Tab Content"
textAlignment="center"
verticalAlignment="center"
></Label>
</TabViewItem>
<TabViewItem title="Second">
<Label
text="Second Tab Content"
textAlignment="center"
verticalAlignment="center"
></Label>
</TabViewItem>
<TabViewItem title="Third">
<Label
text="Third Tab Content"
textAlignment="center"
verticalAlignment="center"
></Label>
</TabViewItem>
</TabView>
</GridLayout>
Expected behavior
Tab views to load like the bellow:
Sample project
Additional context
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit dem verlinkten StackBlitz und der Reproduktion in src/app/item/items.component.html und vergleiche sie anschließend mit dem Angular-Tutorial zu Master-Detail. Führe das Beispiel mit den aufgeführten Angular- und NativeScript-Versionen aus und verfolge, warum die TabView nicht angezeigt wird. Die Aufgabe ist erledigt, wenn die drei Tabs mit ihren Beschriftungen und Inhalten wie im erwarteten Bild gerendert werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend, mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 45/100