在 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 應該是一個單層對象數組，如下所示：

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

但是這段代碼將它變成了一個 arrays 數組：

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

結果是：

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