Arrays 比较两个列表的索引，不匹配精确值

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

当我单击canada时，我的控制台将打印预期输出（canada为true，United States和Mexico为false）， 但是我点击了墨西哥，所以现在加拿大和墨西哥都被选中了，我所有的国家都变成了假的

我想知道这是不是我实现索引的方式有问题，或者是调用函数的顺序造成的？复选框应返回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);
    }
}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormGroup，FormControl}；
@组成部分({
选择器：'app geo drop'，
templateUrl:'./geo drop.component.html'，
样式URL:['./geo-drop.component.css']
})
导出类GeoDropComponent实现OnInit{
selectedItems:any[]=[]；
名额=[
{代码：'US'，允许：'true'，名称：'United States'，大陆：'North America'}，
{代码：'CA'，允许：'true'，名称：'Canada'，大陆：'North America'}，
{代码：'MX'，允许：'false'，名称：'Mexico'，大陆：'North America'}
];
国家形式：FormGroup；
构造函数（）{}
恩戈尼尼特（）{
//为每个国家/地区添加复选框
this.countriesForm=新表单组（{}）；
for（设i=0；i-1）{
place.allow=true；
}否则{
place.allow=false；
};
});
this.places.forEach（项=>{
console.log（item.name，item.allow）；
});
}
搜索（地点、事件）{
让index=this.selectedItems.indexOf（place.name）；
if（event.target.checked）{
如果（索引==-1）{
this.selectedItems.push（place.name）；
console.log（this.selectedItems）；
}
}否则{
如果（索引！=-1）{
此.selectedItems.splice（索引，1）；
console.log（this.selectedItems）；
}
}
this.allow（this.selectedItems，this.places）；
}
}

html

{{place.name}}{{place.code}}{{place.Continental}}

答案在您自己的调试信息中；你在问“加拿大，墨西哥”的索引 因为你们的国家没有一个被称为“加拿大，墨西哥”，它们是假的

---

您需要在html中的所有选定框中循环以修复它。

我找到了一个简单的解决方案。虽然我不相信它是最快的，但如果已知一种更快的方法，请发布它。此方法在每次（更改）时直接更改值，然后将复选框绑定到允许的当前值

公司

导出类GeoDropComponent实现OnInit{
名额=[
{代码：'US'，允许：true，名称：'United States'，大陆：'North America'}，
{代码：'CA'，允许：true，名称：'Canada'，大陆：'North America'}，
{代码：'MX'，允许：false，名称：'Mexico'，大陆：'North America'}
];
国家形式：FormGroup；
构造函数（）{}
//在销毁时使用ng发送最终副本？
恩戈尼尼特（）{
//为每个国家/地区添加复选框
this.countriesForm=新表单组（{}）；
for（设i=0；i

html

我开始认为这可能是因为我的onInit函数没有将复选框与我的位置列表中的当前值匹配。但是，我的allow函数运行并处理该问题，所以它不应该立即更改值吗？或者我应该在我的onInit函数中调用allow函数吗？作为补充，也许有一种方法可以将true和false值直接从表单传递到places列表，反之亦然？例如，将复选框设为true，然后将该数据提交回。以及使用正确的检查初始化复选框。仍在进行中，但有任何想法，请让我知道更新我添加了[checked]=“{{place.allow}}”来更新此复选框列表。这增加了一些更奇怪的行为，你是说这里不使用过滤函数吗？我应该直接使用for循环吗？我尽量不这样做，因为这个列表完成后会非常大。它需要快速解析，建议？@fusinhussin 1。我并没有说明任何关于过滤器函数的内容，我只是解释为什么调试值是假的。您可以在图片中看到值（2）是“Canada，Mexico”而不是“Mexico”，因此不符合预定义列表中的任何其他值。至于你的另一句话：我对Angular不太熟悉，但如果你很快需要从另一个列表中排除一个列表，请查看

，

（过滤掉这个列表中已经出现在其他列表中的任何内容。）好吧，我只是想弄清楚如何将加拿大和墨西哥作为单独的值进行比较。我在谷歌上找不到任何东西，除了。找到链接了吗？有没有快速更好的方法来比较t

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

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);
    }
}

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