基于 json 值 angular 的动态选项卡答案

【问题标题】：dynamic tabs based on json value angular基于 json 值 angular 的动态选项卡
【发布时间】：2020-02-12 03:00:05
【问题描述】：

目前正在处理材料选项卡，我需要根据我的 json 值动态创建选项卡。

这是我的 json

[
  {
    "regionName": "EMEA",
    "regionCurrency": "USD",
    "orgnazationName": "XYZ",
    "orgnazationSubName": "Miller"
    "Department": [
      {
        "DepartmentName": "Main",
        "FirstName": "David",
        "LastName": "Brown",
        "Band": 2,
        "Salary": 10000.00
      },
      {
        "DepartmentName": "Main 1", 
        "FirstName": "Marry",
        "LastName": "Brown",
        "Band": 2,
        "Salary": 10000.00
      }
    ]
  }
]

选项卡将显示如下。下面的选项卡将采用部门名称

主主 1

这就是我要显示的我正在使用材料选项卡

<mat-tab-group mat-align-tabs="start">
    <mat-tab *ngFor="let item of rowData.Department" label="{{rowData.DepartmentName}}"></mat-tab>
</mat-tab-group>

但选项卡未以模式显示方法是否正确，请告诉我

【问题讨论】：

是你的rowData对象，类似于json文件
@Sachila 是的，这与我的 json 相似

标签： angular angular-material angular8 mat-tab

【解决方案1】：

看起来像错误的绑定

label="{{rowData.DepartmentName}}"

应该是

label="{{item.DepartmentName}}"

【讨论】：

感谢@prabhatojha 的回复，也没有来
您是否应该使用 rowData[0].Department 访问您的 json

【解决方案2】：

rowData 是一个数组而不是一个对象。你需要访问数组的元素

<mat-tab *ngFor="let item of rowData[0].Department" label="{{item.DepartmentName}}"></mat-tab>

【讨论】：

当我尝试访问 [0].department 时出现错误，因为无法读取未定义的属性
使用可选运算符rowData[0]?.Department
你得到rowData 的数据了吗？能不能加个控制台检查一下