angular - 将 json 对象数据显示到下拉列表 Angular 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 级下拉列表中得到更改这个 json 数据来自 API我的 StackBlitz 链接 --> https://stackblitz.com/edit/angular-cztf8k

提前致谢

Answer 1

只需在第一个 *ngFor 中使用 LevelValue.level1 ，然后在随后的 * 中使用 [(ngModel)] 属性ngFor。还为每个 mat-option

将 [value] 设置为 level

试一试:

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

Here's a Working Sample StackBlitz for your ref.