NativeScript / NativeScript/angular

TabView not rendering

Offen
#147 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

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:

Image

Sample project

Additional context

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Ö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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.