在 Angular 上创建级联下拉菜单

Question

我尝试使用此示例在 Angular 上创建一些级联下拉菜单

https://stackblitz.com/edit/cascading-dropdown-angular

第一个下拉菜单可以，但第二个不可以。 你能帮我吗？

我想将用户的所有文件夹放在一个数组中，以便将它们用于我的第二个列表，然后可能对列表进行排序

非常感谢

component.html

....

  <div class="">
    <select (change)="onSelect($event.target.value)" class="form-control custom-select" >
       <option value="0">--Enfant--</option>
       <option *ngFor="let users of UserDatas.data.User" value= {{users.userId}}>{{users.userName}}</option>
    </select>
  </div>
                            
  <div class="">
     <select class="form-control custom-select">
        <option value="0">--Date--</option>
        <option *ngFor="let folder of FolderData " value= {{folder.userId}}>{{folder.data}} 
        </option>
     </select>
  </div>

component.ts


  UserDatas: any = [];
  FolderData: any = [];

......

  onSelect(userId) {
      for(var i in this.UserDatas.data.User) {
        if(this.UserDatas.data.User[i].userId === userId ){
          this.FolderData.push(this.UserDatas.data.User[i].folders);
        });
          break;
        }
  }

Userdatas

......

"data":{
        "ent":"MyEnt",
        "User":[
          {
            "userId":"aaaa",
            "userName":"user1",
            "folders":[
                {
                "userId":"aaaa",
                "data":"mydata1"
                },
                {
                "userId":"aaaa",
                "data":"mydata2"
                }
              ],
          },
          {
          "userId":"bbbb",
          "userName":"user2",
          "folders":[
              {
              "userId":"bbbb",
              "data":"mydata11"
              },
              {
              "userId":"bbbb",
              "data":"mydata22"
              }
            ],
          },
    ],

    ........

感谢您的帮助

Answer 1

Folderdata 应该是单层对象数组，如下所示：

[ {...}, {...} ]

但是这段代码正在把它变成一个数组数组：

this.FolderData.push(this.UserDatas.data.User[i].folders)

导致：

[ [ {...}, {...} ] ]