使用 Angular 中 REST API 的数据创建级联下拉列表

Question

如果用户在第一个下拉列表中选择一个选项，根据选择，将根据该选择填充第二个选择，当用户根据其选择选择第二个选项时，将填充第三个选择。请求如下所示：

list: [
  {
    name: 'One', 
    subNameList: [
      {
        name: 'subListOne', 
        typeList: ["typeListOne", "typeListTwo", "typeListThree"]
      }
]},
{
  name: 'Two', 
  subNameList: [
    {
      name: 'subListTwo', 
      typeList: ["typeListFour", "typeListFive", "typeListSix"]
    }
]},
{
  name: 'Three', 
  subNameList: [
    {
      name: 'subListThree', 
      typeList: ["typeListSeven", "typeListEight", "typeListNine"]
    }
]},
{
  name: 'Four', 
  subNameList: [
    {
      name: 'subListFour', 
      typeList: ["typeListTen", "typeListEleven", "typeList12"]
    }
]}
]

这是我对获取信息的 REST 服务的调用：

    populateDocCategory() {
    this.taxonomyService.getTaxonomyDetails1().subscribe((res : Taxonomy) =>{
      if(res){
        this.taxonomyResponse = res;
        this.taxonomyResponse.categoryList.forEach(cat =>{

          this.docCategory.push(cat.name);
          cat.subCategoryList.forEach(subCat =>{
            this.docSubCategory.push(subCat.name);
            subCat.typeList.forEach(docType =>{
              this.docType.push(docType);
            })
          });
        });
      }
      this.docCategory.sort();
      this.docSubCategory.sort();
    });
  }

  populateSubCategory(e, index) {
    this.docSubCategory = [];
    this.docType = [];
    this.selectedCategory = e;
    this.taxonomyResponse.categoryList.forEach(c => {
      if (c.name === e) {
        c.subCategoryList.forEach(subcat => {
          this.docSubCategory.push(subcat.name);
          subcat.typeList.forEach(docType =>{
            this.docType.push(docType);
          })
        });
      }
      this.docSubCategory.sort();
    });
  }

  populateDocType(e, index) {
    let setDocCat = "";
    this.taxonomyResponse.categoryList.forEach(c => {
      if (c.name === this.selectedCategory) {
        //setDocCat = c;
        c.subCategoryList.forEach(subcat => {
          if (subcat.name === e) {
            this.docType = subcat.typeList;
          }
        });
      }
      else{
        c.subCategoryList.forEach(subcat => {
          if (subcat.name === e) {
            this.docType = subcat.typeList;
            this.selectedCategory = c.name;
          }
        });
      }
      this.docType.sort();
    });
 

}

我想我已经有了我需要的东西，只是很难在前端显示它。预先感谢您。

Answer 1

找到了这个教程，它很有魅力。

使用 Angular 级联下拉菜单