angular - 将JSON对象数据显示到下拉列表中的angular 2？

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"
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

级别1名称应显示在级别1下拉列表中
级别2名称应显示在级别2下拉列表中
级别3名称应显示在级别3下拉列表中
level4name应显示在level4下拉列表中
根据级别4，选择值应在级别5下拉列表中得到更改
这个json数据来自api
我的stackblitz链接-->https://stackblitz.com/edit/angular-cztf8k
提前谢谢

最佳答案

只需在第一个LevelValue.level1中使用*ngFor，然后在随后的[(ngModel)]中使用*ngFor属性。对于每个[value]
试试看：

<!-- 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>

这是给你的裁判的Working Sample StackBlitz。