Question

我有以下HTML：

readonly

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

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

我不明白为什么在选择其他集成后第二个下拉列表中的值不会更新。

enter image description here

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

在这里，我得到了所有整合：

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);
    });

 }

此处返回所有集成和方案的服务：

    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);
      });
    });
  }

可能是我做错了什么。我很感激您的建议。

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

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

1 个答案: