Angular 为什么输入元素没有获得焦点？

我在angular项目中使用ag网格社区版。要求是在选项卡上启用内联编辑，这已经实现了，但还有另一个要求，即在导航选项卡并到达最后一列并再次点击tab键时，它应该创建一个空行，并将焦点放在新行的第一个元素上。我能够通过ag网格函数setRowData（data）推送新数据

我尝试了网格api中可用的startEditingCell（）和setFocusedCell（）。它们确实关注元素，但输入元素中的光标不会出现

import {
    Component, OnInit
} from '@angular/core';
import {GridOptions, StartEditingCellParams} from "ag-grid-community";

@Component({
  selector: 'app-angular-grid',
  templateUrl: './angular-grid.component.html',
  styleUrls: ['./angular-grid.component.css']
})
export class AngularGridComponent implements OnInit {

  gridOptions:GridOptions;
  constructor() {
  }

  ngOnInit() {
    this.initializeGridOption();
  }


  initializeGridOption() {
    this.gridOptions = {
      onGridReady: (params)=> {
        params.api.sizeColumnsToFit();
      },
      rowData: this.rowData,
      columnDefs: this.columnDefs,
      rowSelection: 'multiple',
      onCellEditingStopped: function (params) {
        let rowIndex = params.rowIndex;
        let rowDataLength = this.rowData.length;
        let colId = params.column.getColId();
        if (rowDataLength === rowIndex + 1 && colId === 'price') {
          let data = {id: this.rowData.length + 1, make: '', model: '', price: ''};
          this.rowData.push(data);

          params.api.setRowData(this.rowData);
          setTimeout(() => {
            params.api.startEditingCell({rowIndex: rowDataLength, colKey: 'make'});
            params.api.setFocusedCell(rowDataLength, 'make');

          });
        }
      }
    };
  }

  columnDefs = [
    {
      headerName: '',
      width: 40
    },
    {headerName: 'Make', field: 'make', editable: true},
    {headerName: 'Model', field: 'model', editable: true},
    {
      headerName: 'Price',
      field: 'price',
      editable: true
    }
  ];

  rowData = [
    {id: 1, make: 'Toyota', model: 'Celica', price: 35000},
    {id: 2, make: 'Ford', model: 'Mondeo', price: 32000},
    {id: 3, make: 'Porsche', model: 'Boxter', price: 72000}
  ];
}

---

您不需要通过

setFocusedCell

显式设置单元格焦点

检查我创建的示例plunk：

到达最后一个单元格，点击tab键，观察

输入是否已聚焦

setTimeout(() => {
  params.api.startEditingCell({rowIndex: rowDataLength, colKey: 'make'});
  //params.api.setFocusedCell(rowDataLength, 'make');
});

是的，它工作正常，而且我必须将
editable=true
从列定义移动到默认列定义。我不知道原因，但它正在发挥作用。我在这里观察到，它只对plunker起作用。你们也在机器上试过了吗？它能用。如果您错过了在plunk上无法生成的任何其他内容，请尝试在plunk上复制它，因为plunk view port focus保持在窗口中。我复制了所有的代码并在机器上运行，它并没有把焦点放在最后一个标签上。但当我将button元素放在grid指令下面时，它开始关注最后一列。奇怪，但它是有效的，我只需要找到一些理由，为什么我需要在网格下放置一些额外的元素。