Проблема с выбором опции Угловой материал

Question

Я пытаюсь связать данные JSON, чтобы выбрать вариант углового материала.Но проблема в том, что данные не становятся обязательными, и, кроме того, вся страница замораживается.Я написал следующий код.

<mat-form-field class="full-width">
                        <mat-select placeholder="Select region">
                                <mat-option>-- None --</mat-option>
                                <mat-optgroup *ngFor="let region of list.org" [label]="region.name">
                                    <mat-option *ngFor="let r of region" [value]="r.name">
                                        {{r.name}}
                                    </mat-option>
                                </mat-optgroup>
                        </mat-select>
                </mat-form-field>

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

[
   {
      "id":"8a80806c6657045f016657c4bb53024c",
      "org":{
         "id":"8a8080a565e5c6f90165e5e908630d86",
         "name":"Account 1"
      },
      "account":{
         "id":"8a8080126634467a016634a534613852",
         "org":{
            "id":"8a8080a565e5c6f90165e5e908630d86",
            "name":"Account 1"
         },
         "accountType":"AWS"
      },
      "name":"Name 1"
   },
   {
      "id":"8a80806c6657045f016657c4bb53024c",
      "org":{
         "id":"8a8080a565e5c6f90165e5e908630d86",
         "name":"Account 1"
      },
      "account":{
         "id":"8a8080126634467a016634a534613852",
         "org":{
            "id":"8a8080a565e5c6f90165e5e908630d86",
            "name":"Account 1"
         },
         "accountType":"AWS"
      },
      "name":"Name 2"
   },
   {
      "id":"8a80806c6657045f016657c4bb53024c",
      "org":{
         "id":"8a8080a565e5c6f90165e5e908630d86",
         "name":"Account 2"
      },
      "account":{
         "id":"8a8080126634467a016634a534613852",
         "org":{
            "id":"8a8080a565e5c6f90165e5e908630d86",
            "name":"Account 2"
         },
         "accountType":"Azure"
      },
      "name":"Name 2"
   },
   {
      "id":"8a80806c6657045f016657c4bb53024c",
      "org":{
         "id":"8a8080a565e5c6f90165e5e908630d86",
         "name":"Account 3"
      },
      "account":{
         "id":"8a8080126634467a016634a534613852",
         "org":{
            "id":"8a8080a565e5c6f90165e5e908630d86",
            "name":"Account 3"
         },
         "accountType":"Cloud"
      },
      "name":"Name 3"
   }
]

На самом деле я пытаюсь реализоватьто же самое, что демонстрирует приведенный ниже пример стекаблица.Но проблема в том, что я не могу получить данные от json и привязать к mat-select.Может ли кто-нибудь помочь мне в этом, чтобы решить эту проблему.

На самом деле я пытаюсь привязать имя и имя org.name к полю выбора мата.

Ошибкачто я получаю, см. ниже:

На самом деле я пытаюсь показать выбранные данные в категоризированном формате, который демонстрирует пример.

Пример стекаблица

Answer 1

Ошибка Cannot read property 'org' of undefined происходит, потому что переменная list, вероятно, не определена в вашем компоненте.Чтобы шаблон мог отображать данные с использованием переменных, компонент должен предоставлять переменную.

Кроме того, из-за структуры ваших данных JSON я не верю, что есть необходимость в двух *ngFor, поскольку на объект верхнего уровня имеется только одно свойство name.Это может отличаться в вашем реальном случае использования этого.Кроме того, рассмотрите возможность использования интерфейсов для данных JSON, поскольку это упростит управление JSON.

Stackblitz