下拉列表的值取决于另一个下拉列表的值

Question

我有以下 HTML：

<div>
  <select [(ngModel)]="selectedIntegration" (ngModelChange)="selectIntegration($event)">
    <option *ngFor="let opt of integrationsMass" [value]="opt.key">{{opt.key}}</option>
  </select>

  <div *ngIf="selectedIntegration">
    <select [(ngModel)]="selectedScenario" (ngModelChange)="selectScenario($event)">
      <option *ngFor="let opt of scenarioMass" [value]="opt.key">{{opt.key}}</option>
    </select>
    <app-schema-form
      *ngIf="selectedScenario"
      [schema]="pojo"
      [layout]="layout"
      (onSubmit)="saveScenario($event)">
    </app-schema-form>
  </div>
</div>

我的组件类中的这个方法：

public selectIntegration(val) {
    Log.create('selectIntegration').d(val);
    this.scenarioMass = null;
    this.selectedIntegration = val;
    this.integrationService.getScenarios(this.selectedIntegration).subscribe((scenarios) => {
      Log.create('Scenarios in ScenariosComponent').d(scenarios.toString());
      this.scenarios = scenarios;
      this.scenarioMass = this.objKeysPipe.transform(scenarios);
    });

 }

我不明白为什么在我选择另一个集成后第二个下拉列表中的值没有更新。

enter image description here

我想我应该得到更多信息。

在这里我得到了所有的集成：

    this.integrationsSubscription = this.integrationService.getIntegrations().subscribe((integrations) => {
      this.integrations = integrations;
      Log.create('this.integrations').d(this.integrations.toString());
      Log.create('this.integrations').d(this.integrations.toString());
      this.integrationsMass = this.objKeysPipe.transform(integrations);
      this.integrationsMass.forEach((integration) => {
        Log.create('integrationsMass').d(integration.key);
        Log.create('integrationsMass').d(integration.value);
        Log.create('integrationsMass').d(integration);
        integration.value.scenarios.forEach((scenario) => {
          this.scenarioMass.push({key: integration.key, value: scenario});
        });

        this.visibleForIntegration.set(integration.key, false);
        this.visibleForIntegrationScenario.set(integration.key, new Map<string, boolean>());
        // this.integrationService.getScenarios(integration).subscribe((scenarios) => {
        //   Log.create('Scenarios in ScenariosComponent').d(scenarios.toString());
        //   this.scenarios = scenarios;
        //   this.scenarioMass = this.objKeysPipe.transform(scenarios);
        //   this.scenarioMass.forEach((scenario) => {
        //     this.visibleForIntegrationScenario.get(integration).set(scenario.key, false);
        //     Log.create('scenarioMass.scenario').d(scenario);
        //   });
        // });
        Log.create('integrationsMass.scenario').d(integration);
      });
    });
  }

返回所有集成和场景的服务：

    public getIntegrations(): Observable<EntityList<Integration>> {
    if (this.integrationsCache) {
      return Observable.of(this.integrationsCache);
    } else if (this.observable) {
      return this.observable;
    } else {
      this.observable = this.apiService.get('getIntegrations').map((result) => {
        this.observable = null;
        Log.create('getIntegrations.result').d(result);
        this.integrationsCache = result;

        return this.integrationsCache;
      }).share();

      return this.observable;
    }
  }

    public getScenarios(integrationId: string): Observable<EntityList<Scenario>> {

    return this.getIntegrations().map((result) => result[integrationId] ? result[integrationId].scenarios : {});
  }

可能是我做错了什么。我会感谢您的建议。

Answer 1

这是两个选择元素的简单解决方案，其中第二个选择的选项取决于第一个选择的值。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template:`
   <select [(ngModel)]="firstSelectValue">
    <option *ngFor="let opt of firstSelectOptions" [value]="opt">
       {{ opt }}
    </option>
   </select> 

   <select *ngIf="firstSelectValue" [(ngModel)]="secondSelectValue" >
    <option *ngFor="let opt of secondSelectOptions" [value]="opt">
      {{ opt }}
    </option>
  </select>


  <div>
    <div>First select value: {{ firstSelectValue }}</div>
    <div>Second select value:  {{ secondSelectValue }}</div>
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  private opts = [
    { key: 'one', value: [1,2,3] },
    { key: 'two', value: [3,4,5] },
    { key: 'three', value: [6,7,8] }
  ];

  firstSelectValue = 'one';
  secondSelectValue = null;

  get firstSelectOptions() {
    return this.opts.map(({key}) => key);
  }

  get secondSelectOptions() {
    return (this.opts.find(({key}) => key === this.firstSelectValue)).value
  }

}

Live demo