Ag-Grid：显示选项取决于另一个字段的选择

Question

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

我有两个 cellEditor

  columnDefs = [

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

];

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

我在 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，只会出现选项“蘑菇、番茄”

Stackblitz

我该怎么做？

谢谢

Answer 1

在您的mat-select 上，如果下拉菜单被展开，请在您的类中调用一个方法：

(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.