Ag-Grid：根据另一个字段的选择显示选项

Question

我正在构建一个新网格，但我需要一个 select 字段，该字段会根据第一个字段的选择显示选项。

我有两个 cellEditor

  columnDefs = [

{ field: 'typePizza', editable:true, cellEditor:'pizza'},
{ field: 'toppings', editable: true, cellEditor: 'gridSelect' }

];

'pizza' 一个是 select 我选择一种披萨，gridSelect 有多个 select 我可以选择一种或多种成分但我需要显示受披萨类型影响的选项。

我在 gridSelectComponent 上有这个 toppingList： toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

PizzaComponent 上的 PizzaList pizzaList: string[] = ['Pizza A','Pizza B', 'Pizza C'];

例如，如果我选择 Pizza A，我希望该行仅显示选项“Extra Cheese, Onion”选项.

如果我选择Pizza B只会出现选项'Mushroom, Tomato'

Stackblitz

我该怎么做？

谢谢

Answer 1

在您的 mat-select 上，如果展开下拉列表，请在您的 class:

中调用一个方法

(openedChange)="matOpenedChanged($event)"

在此方法中，查看 typePizza 字段的值是什么并适当地设置您的下拉列表：

matOpenedChanged(event) {
    const currentPizzaType = this.params.data.typePizza;
    if (currentPizzaType == 'Pizza A') {
      this.toppingList = ['Extra cheese', 'Onion'];
    } else if (currentPizzaType == 'Pizza B') {
      this.toppingList = ['Mushroom', 'Tomato'];
    } else {
      this.toppingList = [
        'Extra cheese',
        'Mushroom',
        'Onion',
        'Pepperoni',
        'Sausage',
        'Tomato'
      ];
    }
  }

Demo.

Ag-Grid：根据另一个字段的选择显示选项

Ag-Grid: Show options depending the choice on another field

ag-grid

ag-grid-angular