Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

TabView not rendering

オープン
#147 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
angular, typescript
領域
frontend, mobile

調査の方向性

リンクされた StackBlitz と src/app/item/items.component.html の再現から始め、その後 master-detail の Angular チュートリアルと比較します。記載されている Angular と NativeScript のバージョンでサンプルを実行し、TabView が表示されない理由を追跡します。期待される画像に示されているとおり、3 つのタブがラベルとコンテンツ付きで表示されれば完了です。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
55
フォーク
13
平均マージ
16分
マージ済み PR(30日)
1

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

NativeScript/angular のほかの issue

NativeScript/angular の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。