0

我是 UI 开发和 PrimeNg 的新手，可能答案就在那里，但我找不到。Anyhoo，我在一个 ngFor 循环中创建多个级别的下拉列表。例如，我有 2 间豪华房和套房。和豪华有早餐，早餐+午餐，早餐+晚餐和套房只有2（早餐，早餐+晚餐）所有这些都是通过从数据库中获取数据生成的。

因此，对于第一个下拉菜单，如果用户选择 Deluxe，则第二个下拉菜单的选项应该有 3 个条目，而如果它选择 Suite，则选项应该只有 2。如何实现？

模板：

<div *ngFor="let room of flatRoomObject">
        <div>
          <span class="label" title="{{room.Room.Code}}" style="width: 500px;font-weight: normal">{{room.Room.Name}}</span>
          <span>
            <p-dropdown [options]="masterRooms" [style]="{'width':'195px'}" [(ngModel)]="room.Room.MasterId"></p-dropdown>
          </span>
        </div>
        <div *ngFor="let rateplan of room.Rateplans">
          <div>
            <span class="label" title="{{rateplan.Code}}" style="width: 500px;margin-left: 30px;font-weight: normal">{{rateplan.Name}}</span>
            <span>
              <p-dropdown [options]="masterRateplans" [style]="{'width':'165px'}" [(ngModel)]="rateplan.MasterId"></p-dropdown>
            </span>
          </div>
        </div>
      </div>

请注意，masterRooms 是房间列表，而 masterRateplans 是我打算根据第一个下拉列表中选择的房间动态更改的房间列表。masterRooms 和 masterRateplan 是从组件中的 Db 中获取的。

4

1 回答 1

0

masterRateplans您可以通过更改第一个下拉列表（即房间下拉列表）的更改值来实现此目的。作为masterReteplans下拉选项提供的，更改其在更改房间下拉组件中的值将更改房价计划下拉列表中可见的选项。

因此，在 html 中，使用 (onChange) 来绑定一个更改房间下拉列表的函数，例如我们将该函数命名为changeRatePlan：

<div *ngFor="let room of flatRoomObject">
        <div>
          <span class="label" title="{{room.Room.Code}}" style="width: 500px;font-weight: normal">{{room.Room.Name}}</span>
          <span>
            <p-dropdown [options]="masterRooms" (onChange)="changeRatePlans()" [style]="{'width':'195px'}" [(ngModel)]="room.Room.MasterId"></p-dropdown>
          </span>
        </div>
        <div *ngFor="let rateplan of room.Rateplans">
          <div>
            <span class="label" title="{{rateplan.Code}}" style="width: 500px;margin-left: 30px;font-weight: normal">{{rateplan.Name}}</span>
            <span>
              <p-dropdown [options]="masterRateplans" [style]="{'width':'165px'}" [(ngModel)]="rateplan.MasterId"></p-dropdown>
            </span>
          </div>
        </div>
      </div>

然后在你的逻辑中，实现changeRatePlan函数来改变masterRateplans. 类似于以下内容：

public roomTypes:any={
    "Deluxe": [{
            label: 'Breakfast',
            value: 'Breakfast'
        },
        {
            label: 'Breakfast and Lunch',
            value: 'Breakfast and Lunch'
        },
        {
            label: 'Breakfast and Dinner',
            value: 'Breakfast and Dinner'
        }
    ],
    "Suite": [{
            label: 'Breakfast',
            value: 'Breakfast'
        },
        {
            label: 'Breakfast and Dinner',
            value: 'Breakfast and Dinner'
        }
    ]
}

changeRatePlan(){
    //for example if MasterId 1 is for deluxe room
    if(this.room.Room.MasterId==1)
    {
        this.masterRateplans=this.roomTypes.Deluxe;
    }
    //for suite
    else if(this.room.Room.MasterId==2)
    {
       this.masterRateplans=this.roomTypes.Suite;
    }
}

请注意，上面的逻辑是为了让您了解如何实现该功能。您的实际实现可能会有所不同，例如您可能已经将房间类型存储在一个变量中，而我声明了一个新变量以供您理解。希望这可以帮助。

于 2018-11-12T13:35:27.697 回答