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

Question

我是 UI 开发和 PrimeNg 的新手，可能答案就在那里，但我找不到。 Anyhoo，我在一个 ngFor 循环中创建多个级别的下拉列表。例如，我有 2 间豪华房和套房。而Deluxe有Breakfast,Breakfast+Lunch,Breakfast+DinnerandSuite只有2个（Breakfast,Breakfast+Dinner）所有这些都是从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 是我打算根据第一个下拉列表中选择的房间动态更改的房间列表。 masterRooms 和 masterRateplan 从组件中的 Db 中获取。

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;
    }
}

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