在更新选定列表时获取输出列表（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 重复列表，我得到这样的城市列表=名称1，名称2，名称3，名称4记住它来自多个选定的列表，当我想删除例如名称2并再次推送时，我得到重复例如城市列表=名称1，名称2，名称3，名称4，名称1，名称 3，名称 4，如果我从城市列表中取消选中更多类似名称 3 的元素，那么就像这样我想删除城市列表中的任何元素。我希望我能够解释这个问题，任何帮助表示赞赏

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() 就可以了