angular - 在更新选定列表时获取输出列表（checkedCitiesList）中的重复列表（选择或取消选择列表或个人）

Question

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.scss']
})
export class ComponentComponent implements OnInit {
  @Output() public next: EventEmitter<any> = new EventEmitter<any>();
  counties: any[];
  cities: any[];
  cityName: string;
  selectedAllCounties: any;
  checkedCitiesList: any = [];
  checkedCountiesList: any = [];
  activeState: string;
  selectedAllCities: any;
  isShow = true;

  constructor(private  Apiservice: Apiservice) {}
  ngOnInit(): void {
    this.selectedAllCounties = false;
    this.selectedAllCities = false;
  }

  getAllCounties() {
    if (this.isShow === true) {
      this.isShow = false;
    } else {
      this.isShow = true;
      this.selectedAllCities = false;
      this.cities = this.selectedAllCities;
      this.selectedAllCounties = false;
      this.activeState = '';
    }
    this.samradApiservice.getAllCounties().subscribe(
      (counties) => {
        this.counties = counties;
      });

  }

  getAllCity(cityName: any[], name) {
    this.cityName = name;
    this.activeState = name;
    this.cities = cityName;
    this.selectedAllCounties = false;
  }

  isAllCountiesSelected(isTrue , cities) {
    this.cities = cities;
    for (let i = 0; i < this.cities.length; i++) {
      this.cities[i].isSelectedCity = this.selectedAllCities = isTrue;
    }
    this.getCheckedCitiesList();
    this.getCheckedContieslist();
  }

  getCheckedContieslist() {
    this.checkedCountiesList = [];
    for (let i = 0; i < this.counties.length; i++) {
      if (this.counties[i].isSelected) {
        this.checkedCountiesList.push(this.counties[i]);
      }
    }
    console.log('checked lan ' + this.checkedCountiesList);
    this.Apiservice.setValueOfSelectedContiesList(this.checkedCountiesList);
  }

  checkUncheckAllCities() {
    for (let i = 0; i < this.cities.length; i++) {
      this.cities[i].isSelectedCity = this.selectedAllCities;
    }
    this.getCheckedCitiesList();
  }

  isAllCitiesSelected() {
    this.selectedAllCities = this.cities.every(function(item: any) {
      return item.isSelectedCity === true;
    });
    this.getCheckedCitiesList();
  }

  getCheckedCitiesList() {
    for (let i = 0; i < this.cities.length; i++) {
      if (!this.cities[i].isSelectedCity){
        const index = this.checkedCitiesList.indexOf(this.cities[i]);
        this.checkedCitiesList.splice(index, 1);
      } else
      {
        this.checkedCitiesList.push(this.cities[i]);
        console.log('checked ' + this.checkedCitiesList);
      }
    }
    console.log('checked kommun list ' + this.checkedCitiesList);
    this.Apiservice.setValueOfSelectedCityList(this.checkedCitiesList );
  }

}

<div class="container">
  <ng-button (afOnClick)="getAllCounties()">Conties
    <i _ngcontent-lvi-c7="" class="i-angle-right"></i>
  </ng-button>
</div>
<div class="container" *ngIf="counties" [hidden]="isShow">
  <div class="card"  style="border-right: 1px solid lightgray">
    <ng-card>
      <h2>Conties</h2>
      <hr>
      <ul class="flex-container" *ngFor="let county of counties; let i = index">
        <div class="flex-checkboxes">
          <ng-checkbox onchange="isAllCountiesSelected(county.isSelected, county['cities'])" [(ngModel)]="county.isSelected">
          </ng-checkbox>
        </div>
        <div class="flex-nameList">
          <li [class.active]="county.name === activeState" (click)="getAllCity(county['cities'], county.name)">
            {{county.name}}
          </li>
        </div>
        <div class="arrow"> <i _ngcontent-lvi-c7=""  class="i-angle-right i-right-arrow"></i></div>
      </ul>
    </ng-card>
  </div>
  <div class="card"  style="border-right: 1px solid lightgray;margin-top: 4rem" *ngIf="cities">
    <ng-card >
      <h2>{{cityName}}</h2>
      <hr>
      <div style="margin-top: 15px">
        <ng-checkbox onchange="checkUncheckAllCities()" [(ngModel)]="selectedAllCities" ></ng-checkbox>
      </div>
      <ul class="flex-container" *ngFor="let city of cities; let i = index">
        <div class="flex-checkboxes">
          <ng-checkbox (afOnChange)="isAllCitiesSelected()" [(ngModel)]="city.isSelectedCity">
          </ng-checkbox>
        </div>
        <div class="flex-nameList">
          <li>
            {{city.name}}
          </li>
        </div>
      </ul>
    </ng-card>
  </div>
</div>

让我澄清一件事，我无法在此处粘贴原始代码，但如果存在拼写错误，我对此感到非常抱歉。我有像县这样的主列表，它们都有复选框，当我单击任何县复选框时，子列表（即城市列表）将弹出并选择所有元素。我可以在县上选择多个列表，也可以选择作为城市列表的子列表，它是多选列表和子列表。整个代码运行良好，但问题是当我检查多个选择县时，在多个子列表（即城市列表）下。我在这里遇到问题 getCheckedCitiesList() ，即使我想删除 sublist(cities) 中的某些元素，它也会给 med 重复列表, 我得到了这样的 citiesList= name1, name2, name3, name4 记住它是从多个选定的列表中获取的，当我想删除例如 name2 并再次推送时，我得到了重复，例如itiesList= name1, name2, name3, name4,name1,name3 , name4, 就像这样，如果我从城市列表中取消选中一个更像 name3,element 而不是再次城市列表 = name1, name2, name3, name4,name1,name3, name4,name1, name4, 意味着我在最终列表中推送了重复列表想要删除城市列表中的任何元素。我希望我能够解释这个问题，任何帮助表示赞赏 城市列表中的元素比再次城市列表=名称1，名称2，名称3，名称4，名称1，名称3，名称4，名称1，名称4，意味着我在最终列表中推送重复列表，无论我想删除城市列表中的任何元素。我希望我能够解释这个问题，任何帮助表示赞赏 城市列表中的元素比再次城市列表=名称1，名称2，名称3，名称4，名称1，名称3，名称4，名称1，名称4，意味着我在最终列表中推送重复列表，无论我想删除城市列表中的任何元素。我希望我能够解释这个问题，任何帮助表示赞赏

标签： angular

Answer 1

import {Component, EventEmitter, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.scss']
})
export class ComponentComponent implements OnInit {
  @Output() public next: EventEmitter<any> = new EventEmitter<any>();
  counties: any[];
  cities: any[];
  cityName: string;
  selectedAllCounties: any;
  checkedCitiesList: any = [];
  checkedCountiesList: any = [];
  activeState: string;
  selectedAllCities: any;
  isShow = true;
  tempList: any[] = [];
  checked: any;

  constructor(private  Apiservice: Apiservice) {}
  ngOnInit(): void {
    this.selectedAllCounties = false;
    this.selectedAllCities = false;
  }

  getAllCounties() {
    if (this.isShow === true) {
      this.isShow = false;
    } else {
      this.isShow = true;
      this.selectedAllCities = false;
      this.cities = this.selectedAllCities;
      this.selectedAllCounties = false;
      this.activeState = '';
    }
    this.samradApiservice.getAllCounties().subscribe(
      (counties) => {
        this.counties = counties;
      });

  }

  getAllCity(cityName: any[], name) {
    this.cityName = name;
    this.activeState = name;
    this.cities = cityName;
    this.selectedAllCounties = false;
  }

  isAllCountiesSelected(isTrue , cities) {
    this.cities = cities;
    for (let i = 0; i < this.cities.length; i++) {
      this.cities[i].isSelectedCity = this.selectedAllCities = isTrue;
    }
    this.getCheckedCitiesList();
    this.getCheckedContieslist();
  }

  getCheckedContieslist() {
    this.checkedCountiesList = [];
    for (let i = 0; i < this.counties.length; i++) {
      if (this.counties[i].isSelected) {
        this.checkedCountiesList.push(this.counties[i]);
      }
    }
    console.log('checked lan ' + this.checkedCountiesList);
    this.Apiservice.setValueOfSelectedContiesList(this.checkedCountiesList);
  }

  checkUncheckAllCities() {
    for (let i = 0; i < this.cities.length; i++) {
      this.cities[i].isSelectedCity = this.selectedAllCities;
    }
    this.getCheckedCitiesList();
  }

  isAllCitiesSelected(event, checked) {
  this.element = event;
  this.checked = checked;
    this.selectedAllCities = this.cities.every(function(item: any) {
      return item.isSelectedCity === true;
    });
    this.getCheckedCitiesList();
  }

  getCheckedCitiesList() {
  for (var i = 0; i < this.cities.length; i++) {
      if (this.cities[i].isSelectedCity) {
        this.checkedCitiesList.push(this.cities[i]);
      }
    }
    if(this.element === false) {
      this.tempList = this.checkedCitiesList.filter(value => {
        return value.isSelectedCity !== this.element;
      });
    } else{
      this.tempList = this.checkedCitiesList.filter(value => {
        return value.isSelectedCity === true;
      });
    }
    console.log('checked list ' + this.tempList );
    this.Apiservice.setValueOfSelectedCityList(this.tempList);
  }

}

在要接收 apiservice new Set([...tempList] 的地方使用它以避免重复，仅此而已。只需在此方法中更改这些行 getCheckedCitiesList() 即可