NativeScript / NativeScript/angular

TabView not rendering

未关闭
#147 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
TypeScript
星标
55
派生
13
平均合并
16 分钟
30 天内合并 PR
1

描述

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

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从链接的 StackBlitz 和 src/app/item/items.component.html 中的复现开始,然后将其与 master-detail Angular 教程进行比较。使用列出的 Angular 和 NativeScript 版本运行示例,并追踪 TabView 未出现的原因。当三个选项卡按照预期图像中的样子显示其标签和内容时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。