динамические вкладки на основе значения json angular

в настоящее время работаю над вкладкой материала, где мне нужно динамически создавать вкладки на основе моего значения 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>

Но вкладка не отображается в модальном режиме, правильный ли подход, пожалуйста, дайте мне знать


angular angular8 angular-material mat-tab
person Mr.M    schedule 12.02.2020    source источник
comment
ваш объект rowData похож на файл json   -  person Sachila Ranawaka    schedule 12.02.2020
comment
@Sachila да, это было похоже на мой json   -  person Mr.M    schedule 12.02.2020

Ответы (2)


arrow_upward
0
arrow_downward

похоже на неправильную привязку

label="{{rowData.DepartmentName}}"

должно быть

label="{{item.DepartmentName}}"
person prabhatojha    schedule 12.02.2020
comment
Спасибо за ответ @prabhatojha, он тоже не придет - person Mr.M; 12.02.2020
comment
Если вы получаете доступ к своему json, используя rowData[0].Department - person prabhatojha; 12.02.2020

arrow_upward
0
arrow_downward

rowData - это массив, а не объект. вам нужно получить доступ к элементу массива

<mat-tab *ngFor="let item of rowData[0].Department" label="{{item.DepartmentName}}"></mat-tab>
person Sachila Ranawaka    schedule 12.02.2020
comment
когда я пытаюсь получить доступ к [0].department, я получаю сообщение об ошибке, поскольку не могу прочитать свойство неопределенного - person Mr.M; 12.02.2020
comment
используйте необязательный оператор rowData[0]?.Department - person Sachila Ranawaka; 12.02.2020
comment
ПОЛУЧАЕТЕ ли вы данные для rowData. Можете ли вы добавить консоль и проверить - person Sachila Ranawaka; 12.02.2020