indexOf 比较两个列表，不匹配精确值

Question

好的，所以我有一个复选标记表单列表，单击它们后，我提交一个事件并将所有选中的框值放入一个列表中，然后我将该列表与另一个列表进行比较以更改匹配的选中值从真到假（使用索引）。

当我单击加拿大时，我的控制台打印出预期的输出（加拿大为真，美国和墨西哥为假），然后我点击墨西哥，所以现在加拿大和墨西哥都被选中了，我所有的国家都变成了假。

我想知道这是不是我实现索引的方式有问题，还是调用函数的顺序导致了这个？复选框应 return 为真。

组件：

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

答案在你自己的调试信息中；你问的是 "Canada, Mexico" 的索引由于 none 个国家被称为 "Canada, Mexico"，它们是错误的。

您需要遍历 html 中所有选定的框来修复它。

Answer 2

我找到了一个简单的解决方案。虽然我不认为它是最快的，但如果知道更快的方法，请post。此方法直接在每个（更改）上更改值，然后将复选框绑定到 allowed

的当前值

补偿

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"
                >

indexOf 比较两个列表，不匹配精确值

indexOf comparing two lists, not matching exact values

arrays

indexof

angular