从下拉列表数组中删除未 selected 值 - ngx-select-dropdown

Question

context：Angular 应用程序使用 ngx-select-下拉菜单。用户可以 select 多个值，这些值被分类到“桶”中并发送到 api.

问题：我无法从末尾数组中删除 selected 项目 - this.filterState。我添加了一个检查以确保不能多次添加一个项目 - 单击 select 项目和单击 deselect 项目。我认为现在是删除带有 splice 的项目的好时机，因为如果数组中已经存在，用户会点击 deselect - 但是，下拉列表不会传递该值deselected 对象的它只是将其从下拉列表的值数组中删除。

  const index = this.filterState[convertedParam].indexOf(value);

  if (index === -1) {
    this.filterState[convertedParam].push(value);
  }

建议的解决方案：我认为在事件更改时需要对下拉值对象和先前发送到 api 的数组进行某种比较。

最终目标：能够在排序数组中添加和删除对象

Here is a stackblitz that I put together...

app.component.ts

  handleFilterChange(prop: string, value: any): void {

// I think the comparison with "value" and whats already in "this.filterState" will need to be done here?

    let field = this.fields.find(f => f.name === prop);

    if (field.params) {
      value.forEach(v => this.setFilterState(v.type, v, field));
    } else {
      this.setFilterState(prop, value, field);
    }
    console.log("SUBMITTED SORTED VALUES", this.filterState);
  }

  setFilterState(prop: string, value: any, field: Field): void {
    const colourParamMap = {
      I_am_RED: "reds",
      I_am_BLUE: "blues",
      I_am_GREEN: "greens"
    };

    if (field.name === "multiselect_1") {

      const convertedParam = colourParamMap[prop];

      const index = this.filterState[convertedParam].indexOf(value);

      //stops from adding same value again and adds value to array
      if (index === -1) {
        this.filterState[convertedParam].push(value);
      }

    } else {
      //There will be more logic here
      this.filterState[prop] = value;
    }
  }

https://stackblitz.com/edit/ngx-select-dropdown-xkfbyr?file=app%2Fapp.component.ts

Answer 1

最后一个简单的修复 - 我试图把事情复杂化。我需要重置 this.filterState，因为下拉列表中的值将包括之前的每个值，减去取消选择的值。

  handleFilterChange(prop: string, value: any): void {
    this.filterState = {
      reds: [],
      blues: [],
      greens: []
    };

从下拉列表数组中删除未 selected 值 - ngx-select-dropdown

Remove unselected value from dropdown array - ngx-select-dropdown

javascript

arrays

angular

typescript

ngx-select-dropdown