Отобразить данные объекта json в раскрывающийся список Угловой 2?

Question

HTML

              <!-- level One  Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 window-pad-height no-overflow">
                  <mat-label> Level 1: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferOne">
                      <mat-option *ngFor="" [value]="levelone">
                        

                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- level Two  Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1  no-overflow">
                  <mat-label> Level 2: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferTwo">
                      <mat-option *ngFor="" [value]="leveltwo">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- level Three Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 no-overflow">
                  <mat-label> Level 3: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferThree">
                      <mat-option *ngFor="" [value]="levelthree">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>


              <!-- level Four Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 no-overflow">
                  <mat-label> Level 4: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferFour">
                      <mat-option *ngFor="" [value]="levelfour">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

              <!-- level Five Offer for Drop Down -->
              <div class="row no-overflow">
                <div class="col-md-1 no-overflow">
                  <mat-label> Level 5: </mat-label>
                </div>
                <div class="col-md-2 no-overflow">
                  <mat-form-field class="no-overflow">
                    <mat-select placeholder="select" [(ngModel)]="selectedOfferFive">
                      <mat-option *ngFor="" [value]="levelfive">
                        
                      </mat-option>
                    </mat-select>
                  </mat-form-field>
                </div>
              </div>

JSON

LevelValue: any= 
  {
    "level1": [{
            "level1Name": "Prepaid",
            "level2": [ {
                    "level2Name": "data",
                    "level3": [ {
                            "level3Name": "getCustomer",
                            "level4": [{
                                    "level4Name": "Prepaid",
                                    "level5": [
                                        "1",
                                        "2",
                                        "3"
                                    ]
                                }, {
                                    "level4Name": "Postpaid",
                                    "level5": [
                                        "4",
                                        "5",
                                        "6"
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

level1Name должно отображаться в раскрывающемся списке первого уровня

level2Name должно отображаться в раскрывающемся списке второго уровня

level3Name должно отображаться в раскрывающемся списке третьего уровня

level4Name должно отображаться в раскрывающемся списке четвертого уровня Согласно значениям выбора уровня 4 должно изменяться выпадающее меню уровня 5, из которого поступают данные jsonAPI My StackBlitz Link -> https://stackblitz.com/edit/angular-cztf8k

Заранее спасибо

Answer 1

Просто используйте LevelValue.level1 в первом *ngFor, а затем [(ngModel)] свойство этого в последующем *ngFor.Также установите [value] на level для каждого mat-option

Попробуйте:

<!-- level One  Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 window-pad-height no-overflow">
    <mat-label> Level 1: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferOne">
        <mat-option *ngFor="let level of LevelValue.level1" [value]="level">
          {{level.level1Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- level Two  Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1  no-overflow">
    <mat-label> Level 2: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferTwo">
        <mat-option *ngFor="let level of selectedOfferOne.level2" [value]="level">
          {{level.level2Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- level Three Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 3: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferThree">
        <mat-option *ngFor="let level of selectedOfferTwo.level3" [value]="level">
          {{level.level3Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>


<!-- level Four Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 4: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferFour">
        <mat-option *ngFor="let level of selectedOfferThree.level4" [value]="level">
          {{level.level4Name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<!-- level Five Offer for Drop Down -->
<div class="row no-overflow">
  <div class="col-md-1 no-overflow">
    <mat-label> Level 5: </mat-label>
  </div>
  <div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
      <mat-select placeholder="select" [(ngModel)]="selectedOfferFive">
        <mat-option *ngFor="let level of selectedOfferFour.level5" [value]="level">
          {{ level }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

Вот вам Рабочий образец StackBlitz для вашей ссылки.