Question

我有 2 个下拉列表，一个依赖于另一个来获得结果，目前我能够通过 api 的结果使第一次选择工作。我希望根据我对第一个的更改来填充第二个。

product.component.html

Ok(0)

product.component.ts

 ///// FIRST dropdownlist
    <mat-form-field >
        <mat-label>Select Ref</mat-label>
        <select [(ngModel)]="selectedObject" (change)="getFammille($event.target.value)" matNativeControl>
            <option value="">-</option>
            <option *ngFor="let application of applications; let i = index" [value]="applications[i].reference">{{application.reference}}</option>&lt;/option>
        </select>
      </mat-form-field>

      <div>

 ///// Second dropdownlist that is depending of the first one
        <mat-form-field >
            <mat-label>Sélectionner une famille</mat-label>
            <select  (change)="console.log(selectedObject)"  matNativeControl>
                <option value="">-</option>
                <option *ngFor="let famille of familles; let i = index" [value]="familles[i].nom">{{famille.nom}}</option>&lt;/option>
            </select>
          </mat-form-field>
        </div>

product.service.ts

  import { Component, OnInit } from "@angular/core"
import { CreateProductService } from "./create-product.service"
import { Application, Famille } from '../models/applications';

@Component({
  selector: "app-create-product",
  templateUrl: "./create-product.component.html",
  styleUrls: ["./create-product.component.scss"],
})





export class CreateProductComponent implements OnInit {
  application: any;
  applications: Array<Application> = [];
  famille:any;
  familles: Array<Famille> = [];
  result:any;
  selectedObject: any;

  constructor(public appService: CreateProductService) { }
  ngOnInit(): void {
    this.getApplicationsId()
  }



  getApplicationsId() {
    return this.appService.getApplications().subscribe((applications) => applications.map(a => a.reference))
  }



  getFammille(ref: string): void {
    this.appService.getApplications().subscribe((familles => {
      this.famille = familles.find(a => a.reference === ref)
      console.log(this.famille.Familles)
      return this.famille.Familles = familles
    }))
  }


}

在选择第一个下拉列表时，函数 getfamille() 将返回我需要在第二个下拉列表中获取的对象列表：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Application } from '../models/applications';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CreateProductService {
  baseUrl = 'https://localhost:5001/api/myApp';


  constructor(private http: HttpClient) { }

  public getApplications(): Observable<Application[]> {
    const result = this.http.get<Application[]>(this.baseUrl);
    return result
  }

}

我想要第二个下拉列表来获取这个对象列表的名称列表，有没有办法从第一个下拉列表中获取选择值并将其传递给第二个

很遗憾，我无法提供功能强大的 Plunker，因为我使用的数据来自我的后端应用程序..

下拉列表取决于第一个的选择

0 个答案: