Angular 基于json值的动态选项卡

目前正在处理material选项卡，我需要根据我的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>

---

但该选项卡未在模式中显示方法是否正确请让我知道

看起来是不正确的绑定

label="{{rowData.DepartmentName}}"

应该是

label="{{item.DepartmentName}}"

---

看起来绑定不正确

label="{{rowData.DepartmentName}}"

应该是

label="{{item.DepartmentName}}"

---

rowData

是数组而不是对象。您需要访问数组的元素

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

---

rowData

是数组而不是对象。您需要访问数组的元素

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

您的

rowData

对象类似于json吗file@Sachila是的，它是类似于我的jsonis您的

rowData

对象类似于jsonfile@Sachila是的，这与我在回复@prabhatojha时的JSonTanks类似，如果您使用rowData[0]访问json，则该回复也不会出现.department感谢@prabhatojha的回复，如果您使用rowData[0]访问json，该回复也不会出现。department当我尝试访问[0]时。department我收到一个错误，因为无法读取Undeineduse optioal operator的属性

rowData[0]？。department

是否获取

rowData

的数据。当我尝试访问[0]时，是否可以添加控制台并进行检查。部门我收到一个错误，因为无法读取Undeineduse optioal operator的属性

rowData[0]？。部门

是否获取

rowData

的数据。你能添加一个控制台并检查吗