Question

我有一个表单，在选择SELECT下拉列表时，正在生成另一个SELECT下拉列表。在两个SELECT中，由ngFor生成OPTION，因为数据来自数据库通过服务。我在第一个下拉列表中使用了click，select和change函数来生成第二个下拉选项，但这不起作用。任何帮助表示赞赏

组件

ngOnInit() {
  this.select1Service.getSelect1().subscribe((options1) => {
      this.options1 = options1;
  });
}

  populateSelect2(id: number) {
    console.log('Clicked');
    this.select2Service.getSelect2(id).subscribe((options2) => {
      this.options2= options2;
      console.log(this.options2);
    });
  }

HTML

<div class="form-group col-md-6">
              <label for="input1" class="col-form-label">Select 1
                <span class="red-text text-accent-4">*</span>
              </label>
              <select id="inputArea" class="form-control" formControlname="in4">
                <option selected>Choose option</option>
                <option *ngFor="let item of options1" value="{{item.id}}" (change)="populateSelect2(item.id)">{{item.name}}</option>
              </select>
            </div>

<div class="col-md-6">
              <p>Select 2
                <span class="red-text text-accent-4">*</span>
              </p>
                  <select id="input2" class="form-control" formControlname="in6">
                    <option *ngFor="let item of options2" value="{{item.id}}">{{item.name}}</option>
                  </select>                
            </div>

Answer 1

您的代码中存在一些问题，例如您如何处理第一个下拉列表中的change事件。 1.首先，change应该用在select标签上而不是选项本身，如下面的

<select id="inputArea" class="form-control" [(ngModel)] = "selectedFirst" formControlname="in4" (change)="populateSelect2($event.target.value)">
                <option selected value="">Choose option</option>
                <option *ngFor="let item of options1" value="{{item.id}}" >{{item.name}}</option>
              </select>

我更喜欢使用[(ngModel)]来存储下拉列表的选定值，而不是直接将item.id传递给函数本身。您可以使用$event.target.value获取dropdown1的当前值，如下所示更改其值 -

(change)="populateSelect2($event.target.value)"

以下是组件的完整工作代码 -

import { Component } from '@angular/core';
import {SelectfirstService} from './select1service';
import {SelectSecondService} from './select2service';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
selectedFirst : string = "";
 options1:any[];
 options2 : any[];
  constructor(private select1Service:SelectfirstService,private select2Service:SelectSecondService){

  }

  ngOnInit() {
  this.select1Service.getSelect1().subscribe((options1) => {
      this.options1 = options1;
  });
}

  populateSelect2(id: number) {
    console.log('selected value from first dropdown:',this.selectedFirst);
    console.log('Clicked');
    this.select2Service.getSelect2(id).subscribe((options2) => {
      this.options2= options2;
      console.log(this.options2);
    });
  }
}

以下是HTML模板app.component.html

<hello name="{{ name }}"></hello>
<div class="form-group col-md-6">
              <label for="input1" class="col-form-label">Select 1
                <span class="red-text text-accent-4">*</span>
              </label>
              <select id="inputArea" class="form-control" [(ngModel)] = "selectedFirst" formControlname="in4" (change)="populateSelect2($event.target.value)">
                <option selected value="">Choose option</option>
                <option *ngFor="let item of options1" value="{{item.id}}" >{{item.name}}</option>
              </select>
            </div>

<div class="col-md-6">
              <p>Select 2
                <span class="red-text text-accent-4">*</span>
              </p>
                  <select id="input2" class="form-control" formControlname="in6">
                    <option *ngFor="let item of options2" value="{{item.id}}">{{item.name}}</option>
                  </select>                
            </div>

我在下面创建了两个示例服务类来进行测试

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';

@Injectable()
export class SelectSecondService {
  run() {
    console.log('app service');
  }

getSelect2(id:number):Observable<any[]>{
   let secondOptions :any[] = [];
   secondOptions.push({id:1,name:'option1'});
   secondOptions.push({id:1,name:'option2'});
   secondOptions.push({id:1,name:'option3'});
   secondOptions.push({id:2,name:'option1'});
   secondOptions.push({id:2,name:'option2'});
   secondOptions.push({id:3,name:'option1'});
   secondOptions.push({id:3,name:'option2'});

   return Observable.of(secondOptions.filter( x => x.id == id));
  }


}

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs';

@Injectable()
export class SelectfirstService {
  run() {
    console.log('app service');
  }

  getSelect1():Observable<any[]>{
   let firstOptions :any[] = [];
   firstOptions.push({id:1,name:'option1'});
   firstOptions.push({id:2,name:'option2'});
   firstOptions.push({id:3,name:'option3'});
   return Observable.of(firstOptions);
  }

}

这是一个有用的演示链接

https://stackblitz.com/edit/angular-fwxunh

选择另一个SELECT时生成SELECT下拉列表

1 个答案: