[agGrid Angular，使用agRichSelectCellEditor

Question

我从Web服务中以JSON格式填充了Employee记录的agGrid。

[
   { 
     id: 123,
     firstName: 'Mike',
     lastName: 'Jones',
     countryId: 1001,
     DOB: '1980-01-01T00:00:00',
     . . .
   }

我还有第二个Web服务，返回国家代码列表：

[ 
    { id: 1000, name: 'France' },
    { id: 1001, name: 'Spain' },
    { id: 1002, name: 'Belguim' }
]

我想做的是让我的agGrid具有一列来显示用户的详细信息，包括他们所在国家的name，并且当他们编辑此单元格时，将会出现一个国家/地区代码列表，可以选择一个，它将使用该国家/地区的ID更新记录。

基本的东西，不是吗？

但是有没有人设法使agGrid成功使用“ agRichSelectCellEditor”成功完成此操作？

  { headerName: 'Country', width: 120, field: 'countryId', editable: true, 
      cellEditor:'agRichSelectCellEditor',

      cellEditorParams: { 
          // This tells agGrid that when we edit the country cell, we want a popup to be displayed
          // showing (just) the names of the countries in our reference data
          values: listOfCountries.map(s => s.name)
      },

      //  The "cellRenderer" tells agGrid to display the country name in each row, rather than the
      //  numeric countryId value
      cellRenderer: (params) => listOfCountries.find(refData => refData.id == params.data.countryId)?.name,

      valueSetter: function(params) {
        //  When we select a value from our drop down list, this function will make sure 
        //  that our row's record receives the "id" (not the text value) of the chosen selection.
        params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
        return true;
    }  
  },

我的代码似乎是几乎是正确的。它设法：

• 在agGrid的每一行中显示国家/地区名称
• 显示一个弹出窗口，列出我们的“国家列表”数组中的国家名称
• 当我在弹出窗口中选择一个项目时，它会使用我所选国家/地区的（数字）id值成功更新countryId字段

唯一的问题是，在弹出窗口的顶部，它显示的是countryId值，而不是用户的当前国家/地区名称。

有人能设法使它正常工作吗？

我唯一能想到的解决方法是在此弹出窗口中覆盖CSS并隐藏该顶部元素：

.ag-rich-select-value
{
    display: none !important;
}

它可以工作，但是您不再可以看到以前选择的值。

（（我真的希望agGrid网站上有一些不错的，真实的，可以正常工作的Angular示例...或者至少让开发人员在此发布评论，以互相帮助。）

Answer 1

解决方案是使用valueGetter，而不是cellRenderer：

 { 
    headerName: 'Country', width: 120, field: 'countryId', editable: true, 
    cellEditor:'agRichSelectCellEditor',

    cellEditorParams: { 
        // This tells agGrid that when we edit the country cell, we want a popup to be displayed
        // showing (just) the names of the countries in our reference data
        values: listOfCountries.map(s => s.name)
    },

    valueSetter: function(params) {
        //  When we select a value from our drop down list, this function will make sure
        //  that our row's record receives the "id" (not the text value) of the chosen selection.
        params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
        return true;
    }, 

    valueGetter: function(params) {
        //  We don't want to display the raw "countryId" value.. we actually want 
        //  the "Country Name" string for that id.
        return listOfCountries.find(refData => refData.id == params.data.countryId)?.name;
    }
},

我希望这是有用的...