我想在 Angular 10 中关联三个下拉菜单

Question

在我的后端应用程序中，我有一个根据 parentId 提供数据的函数。从下拉菜单中，我获取所选项目的 id 并将其发送到后端。但我没有收到第二个下拉菜单数据。

这是我的 html 代码。

<form [formGroup]="competence">
          <div class="form-group">
            <select formControlName="discipline" class="form-control" (change)="onChangeDiscipline($event.target.value)">
              <option value="">Select Discipline...</option>
              <option *ngFor="let discipline of disciplines" [value]="discipline.id">{{discipline.description}} {{discipline.id}}</option>
            </select>
          </div>
          <div class="form-group">
            <select formControlName="experience" class="form-control" (change)="onChangeExperience($event.target.value)">
              <option value="">Select Experience...</option>
              <option *ngFor="let experience of experiences" [value]="experience.id">{{experience.description}}</option>
            </select>
          </div>
          <div class="form-group">
            <select formControlName="specilization" class="form-control">
              <option value="">Select Specilization...</option>
              <option *ngFor="let specilization of specilizations" [value]="specilization.id">{{specilization.description}}</option>
            </select>
          </div>
        </form>

这是我的 component.ts 代码。这里在 ngoninit 函数中获取第一个下拉列表的数据。 但是 onchangeDiscipline 和 onchangeExperence 函数不会给我带来项目。

    export class Step3Component implements OnInit {

  profileWorkForm: FormGroup;
  competence: FormGroup;
  submitted = false;
  public profile: Profile;
  public disciplines: Competence;
  public experiences: Competence;
  public specilizations: Competence;

  constructor(
    private competenceService: CompetenceService
  ) {}

  ngOnInit() {
    this.competenceService.getDisciplines().subscribe((competence)=>{
      console.log(competence);
      this.disciplines = competence;
    })
  }
  
  onChangeDiscipline(parentId: number) {
    if(parentId){
      this.competenceService.getExperiences(parentId).subscribe((experience)=>{
        this.experiences.id = experience.id;
        this.experiences.description = experience.description;
        this.specilizations = null;
      });
    }
    else{
      this.experiences =null;
      this.specilizations = null;
    }
  }

  onChangeExperience(parentId: number) {
    if(parentId){
      this.competenceService.getSpecilizations(parentId).subscribe((specilization)=>{
        this.specilizations.id = specilization.id;
        this.specilizations.description = specilization.description;
      });
    }
    else{
      this.specilizations =null;
    }
  }
}

这是我的 service.ts 代码

export class CompetenceService {
constructor(private http: HttpClient) { }

getDisciplines() {
    return this.http.get<Competence>(endpoint + 'competence/getAllByParentId', httpOptions);
}

getExperiences(parentId: number){
  return this.http.get<Competence>(endpoint + 'competence/GetAllByParentId' + {parentId});
}

getSpecilizations(parentId: number){
  return this.http.get<Competence>(endpoint + 'competence/GetAllByParentId' + {parentId});
}

}

这是我的后端代码。

[HttpGet("GetAllByParentId")]
    public async Task<IActionResult> GetAllByParentId(int? parentId = null)
    {
        var competences = await _competenceService.GetAllByParentId(parentId).ConfigureAwait(false);
        return Ok(competences);
    }

我收到此错误：ERROR TypeError: Cannot read property 'message' of null

Answer 1

首先，您需要在服务中的链接'competence/GetAllByParentId/' 中添加一个“/”：

export class CompetenceService {
constructor(private http: HttpClient) { }

getDisciplines() {
    return this.http.get<Competence>(endpoint + 'competence/getAllByParentId', httpOptions);
}

getExperiences(parentId: number){
  return this.http.get<Competence>(endpoint + 'competence/GetAllByParentId/' + {parentId});
}

getSpecilizations(parentId: number){
  return this.http.get<Competence>(endpoint + 'competence/GetAllByParentId/' + {parentId});
}

并在您的控制器中添加 /{parentId} 到您的路线

[HttpGet("GetAllByParentId/{parentId}")]
public async Task<IActionResult> GetAllByParentId(int? parentId = null)
{
    var competences = await _competenceService.GetAllByParentId(parentId).ConfigureAwait(false);
    return Ok(competences);
}