角嵌套多选

时间:2018-07-20 13:11:18

标签: javascript angular

我试图弄清楚如何为Angular中的多选实现嵌套模型。我有这种格式的嵌套对象:

[{
    "key": "123",
    "values": [{
        "key": "345",
        "values": [{
            "key": "678"
          },
          {
            "key": "918"
          }
        ]
      },
      {
        "key": "573",
        "values": [{
            "key": "452"
          },
          {
            "key": "763"
          }
        ]
      }
    ]
  },
  {
    "key": "742",
    "values": [{
        "key": "135",
        "values": [{
            "key": "855"
          },
          {
            "key": "244"
          }
        ]
      },
      {
        "key": "785",
        "values": [{
            "key": "314"
          },
          {
            "key": "235"
          }
        ]
      }
    ]
  }
]

我想做的是拥有三个独立的多重选择,这些多重选择将进行更新,以便在更新上级时,更改会向下反映到子对象。这是我尝试过的尝试:

<mat-form-field class="w-100">
  <mat-select id="levelOneIndustries" placeholder="Root level industry" multiple [(ngModel)]="search.industries[0]"  name="levelOneIndustries">
    <mat-option *ngFor="let industry of availableIndustries" [value]="industry">
      {{industry['key']}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="w-100">
  <mat-select id="levelTwoIndustries"  placeholder="Second level industry" multiple [(ngModel)]="search.industries[1]" name="levelTwoIndustries">
    <span *ngFor="let rootIndustry of search.industries[0]">
      <mat-option *ngFor="let industry of rootIndustry['values']" [value]="industry">
        {{industry['key']}}
      </mat-option>
    </span>
  </mat-select>
</mat-form-field>

<mat-form-field class="w-100">
  <mat-select id="levelThreeIndustries" placeholder="Third level industry" multiple [(ngModel)]="search.industries[2]" name="levelThreeIndustries">
    <span *ngFor="let rootIndustry of search.industries[1]">
      <mat-option *ngFor="let industry of rootIndustry['values']" [value]="industry">
        {{industry}}
      </mat-option>
    </span>
  </mat-select>
</mat-form-field>

我也做过(在我看来)笨拙的逻辑,以在ngModelChange的层次结构中向下迭代所有子对象,并过滤那些没有父对象但我有某种方法的对象现在缺少将单个对象绑定到所有三个多重选择的功能吗?

0 个答案:

没有答案