agGrid 与 Angular，使用 agRichSelectCellEditor

Question

我有一个 agGrid，其中填充了来自我的 Web 服务的 JSON 格式的员工记录。

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

我有第二个网络服务返回国家/地区代码列表：

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

我想做的是让我的 agGrid 有一列显示用户的详细信息，包括他们的国家/地区名称，当他们编辑此单元格时，将出现一个国家/地区代码列表，他们可以在其中选择一个，然后'将使用该国家/地区的 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 的每一行中显示国家/地区名称
• 显示一个弹出窗口，列出“国家/地区列表”数组中的国家/地区名称
• 当我在弹出窗口中选择一个项目时，它会countryId使用我选择的国家/地区的（数字）id 值成功更新该字段

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

有人设法让它发挥作用吗？

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

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

它有效......但您不再能够看到您之前选择的值是什么。

（我真的希望 agGrid 网站有一些像样的、真实的、有效的 Angular 示例……或者至少让开发人员在那里发表评论，以互相帮助。）

Answer 1

解决方案是使用 a valueGetter，而不是 a 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;
    }
},

我希望这有用...