Question

我是UI开发和PrimeNg的新手，也许答案就在那里，但我找不到它。顺便说一句，我在ngFor循环中创建多个级别的下拉菜单。例如，我有2间豪华房和套房。豪华客房的早餐，早餐+午餐，早餐+晚餐的价格，而套房仅包含2（早餐，早餐+晚餐）的价格，所有这些都是通过从DB获取数据生成的。

因此对于第一个下拉菜单，如果用户选择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是我打算根据第一个下拉列表中选择的房间动态更改的房间。从组件中的Db获取masterRooms和masterRateplan。

Answer 1

您可以通过在第一个下拉菜单（即“房间”下拉菜单）更改时更改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;
    }
}

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

动态更改下拉PrimeNg Angluar 4的选项

1 个答案: