indexOf比較兩個列表，不匹配確切值

Question

好的，所以我有一個選中標記表單的列表，點擊它們後，我提交一個事件並將所有選中的框值放入一個列表中，然後將該列表與另一個列表進行比較將匹配檢查值從true更改爲false（使用index）。

當我點擊加拿大，我的控制檯打印預期的輸出（加拿大是真實的，美國和墨西哥是假的）， ，但後來我點擊墨西哥，所以現在加拿大和墨西哥已被選中，我所有的國家都轉向假。

我想知道，如果這是我正在implenting指數的方式有問題，或者是它調用導致此功能的順序？一個複選框應該返回true。

組件：

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 

@Component({ 
    selector: 'app-geo-drop', 
    templateUrl: './geo-drop.component.html', 
    styleUrls: ['./geo-drop.component.css'] 
}) 

export class GeoDropComponent implements OnInit { 
    selectedItems: any [] = []; 

    places = [ 
     { code: 'US', allow: 'true', name: 'United States', continent: 'North America' }, 
     { code: 'CA', allow: 'true', name: 'Canada', continent: 'North America' }, 
     { code: 'MX', allow: 'false', name: 'Mexico', continent: 'North America' } 
    ]; 

    countriesForm: FormGroup; 

    constructor() { } 

    ngOnInit() { 
     // add checkbox for each country 
     this.countriesForm = new FormGroup({}); 
     for (let i = 0; i < this.places.length; i++) { 
      this.countriesForm.addControl(
       this.places[i].name, new FormControl(false) 
      ) 
     } 
    } 

    allow(selectedPlaces: Array<any>, allPlaces: Array<any>) { 

     allPlaces.filter(function (place) { 
      if (place.name.indexOf(selectedPlaces) > -1) { 
       place.allow = true; 
      } else { 
       place.allow = false; 
      }; 
     }); 
     this.places.forEach(item => { 
      console.log(item.name, item.allow); 
     }); 
    } 

    search(place, event) { 

     let index = this.selectedItems.indexOf(place.name); 
     if (event.target.checked) { 
      if (index === -1) { 
       this.selectedItems.push(place.name); 
       console.log(this.selectedItems); 
      } 
     } else { 
      if (index !== -1) { 
       this.selectedItems.splice(index, 1); 
       console.log(this.selectedItems); 
      } 
     } 
     this.allow(this.selectedItems, this.places); 
    } 
} 

HTML

<div class="geo-list"> 
    <div class="content-box container"> 
     <form [formGroup]="countriesForm"> 
      <div class="place" *ngFor="let place of places"> 
       <input 
        type="checkbox" 
        formControlName="{{place.name}}" 
        (change)="search(place, $event)" 
       > 
       {{ place.name }} | {{ place.code }} | {{ place.continent }} 
      </div> 
     </form> 
    </div> 
</div> 

Answer 1

我找到了一個簡單的解決方案。儘管我不相信它是最快的，但如果知道更快的方法，請發佈它。此方法直接在每個（更改）上更改該值，然後將複選框綁定到允許的當前值

comp。

export class GeoDropComponent implements OnInit { 

    places = [ 
     { code: 'US', allow: true, name: 'United States', continent: 'North America' }, 
     { code: 'CA', allow: true, name: 'Canada', continent: 'North America' }, 
     { code: 'MX', allow: false, name: 'Mexico', continent: 'North America' } 
    ]; 

    countriesForm: FormGroup; 

    constructor() { } 

    // use ng on destroy to send final copy? 

    ngOnInit() { 
     // add checkbox for each country 
     this.countriesForm = new FormGroup({}); 
     for (let i = 0; i < this.places.length; i++) { 
      this.countriesForm.addControl(
       this.places[i].name, new FormControl(false) 
      ) 
     } 
    } 

    search(place, event) { 
     for (let i = 0; i < this.places.length; i++) { 
      if (this.places[i].name === place.name) { 
       this.places[i].allow === true ? this.places[i].allow = false : this.places[i].allow = true; 
      } 
     } 
     console.log(place.allow); 
     console.log(this.places); 
    } 
} 

HTML

<input 
        type="checkbox" 
        formControlName="{{place.name}}" 
        value="{{place.allow}}" 
        (change)="search(place, $event)" 
        [checked]="place.allow" 
       > 

Answer 2

答案就在你自己的調試信息;你問的索引是「加拿大，墨西哥」 由於你們的國家都沒有被稱爲「加拿大，墨西哥」，它們是錯誤的。

您需要遍歷HTML中的所有選定框來修復它。