当我们在Angular中动态添加列时如何将鼠标悬停在组件中的列上？

Question

我已经动态添加了列，但是无法将鼠标悬停在列上。请建议

getDataSource(data: any) {

    return {
      fields: [
        {
          caption: "Type",
          dataField: "type",
          width: 150,
          area: "row",
          sortOrder: "desc"
        },
        {
          Caption: Date,
          area: "column",
          dataField: "date",
          format: "EEE MMM dd yyyy",
          dataType: "date",
          groupInterval: "Date",
          // sortOrder:"desc"
        },
        {
          caption: "ValueNew",
          width: 120,
          dataField: "valueNew",
          dataType: "string",
          area: "data",
          summaryType: "min",
          showValue: false
        }
      ],
      store: data

    };
  }



  getColumnValue(startDate: Date, endDate: Date) {

  }



  callNumber(cell) {

  }


  customizeColumns(columns) {
    if (this.forecastDataSource.length > 0) {


      let request = this.forecastSearchComponenet.getSearchRequest();

      let startDate = request.startDate;
      let endDate = request.endDate;

      if (request.startDate instanceof Date) {
        startDate = request.startDate.toDateString();

      }
      if (request.endDate instanceof Date) {
        endDate = request.endDate.toDateString();
      }

      startDate = new Date(startDate);
      endDate = new Date(endDate);

      let dates = DateRangeHelper.getDates(startDate, endDate);
      for (var m in dates) {

        columns.push({

          caption: new Date(dates[m].toDateString()).toDateString(),
          dataField: 'refereData[' + m + '].value'
        });
      }
      columns.push({
        caption: 'Total',
        dataField: 'total'

      });
    }
  }

Answer 1

如果您一般使用的话

<td *ngFor="let item of fields" (mouseover)="mouseOver(item)">
   {{item.caption}}
</td>

因此，您只需将添加元素的列添加到数组“字段”，就不必担心添加（鼠标悬停）