ag-grid - 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 上的 PizzaListpizzaList: string[] = ['Pizza A','Pizza B', 'Pizza C'];

例如，如果我选择比萨 A，我希望该行仅显示选项“额外奶酪，洋葱”选项。

如果我选择比萨 B ，只出现选项“蘑菇、番茄”

堆栈闪电战

我怎样才能做到这一点？

谢谢

标签： ag-gridag-grid-angular

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

演示。