Así que tengo el siguiente conjunto de datos

 const data = [ { id: '11se23-213', name: 'Data1', points: [ { x: 5, y: 1.1 }, { x: 6, y: 2.1 }, { x: 7, y: 3.1 }, { x: 8, y: 1.5 }, { x: 9, y: 2.9 }, { x: 10, y: 1.1 } ] }, { id: 'fdsf-213', name: 'Data2', points: [ { x: 5, y: 3.1 }, { x: 6, y: 4.1 }, { x: 7, y: 2.1 }, { x: 8, y: 0.5 }, { x: 9, y: 1.9 }, { x: 10, y: 1.4 } ] }, ]

En este conjunto de datos estoy representando el gráfico. Estoy tratando de lograr las siguientes cosas con el conjunto de datos.

• Filtra puntos usando el valor mínimo y máximo (el usuario lo da en el campo de entrada)
  • El usuario tiene la opción de dar solo el valor mínimo
  • El usuario tiene la opción de dar solo el valor máximo
  • El usuario puede dar tanto el valor mínimo como el máximo
• Volver a los datos originales si un usuario elimina/borra el valor/entrada mínimo y máximo

Mirando el requisito anterior, es posible que el valor máximo y mínimo sea nulo.

Como estoy trabajando en Angular, pegaré el código que he hecho hasta ahora y escribiré los problemas que estoy enfrentando debajo.

componente.ts

 const clonedData = data; // Keeping a clone so that I can revert later const mainData = data; // This is the data I am using for rendering chart and filtering // Using reactive forms of angular this.form.valueChanges.pipe( debounceTime(500), distinctUntilChanged(), tap(values => { if (values.min || values.max) { this.mainData = this.mainData.map(item => { return { ...item, points: items.points.filter(point => point.y >= values.min && point.y <= values.max) }); return; } // If both null revert to original data; this.mainData = this.clonedData; }).subscribe()

Entiendo que hay algunos problemas en mi código.

Uno de los problemas principales es incluso si proporciono el valor mínimo y máximo o uno de ellos, la matriz de puntos siempre regresa vacía.

Cuando borro o elimino ambos valores, pasa a la condición else y vuelve a los datos predeterminados (que están funcionando).