Question

好吧，所以我有一个复选标记表格列表，点击它们后，我提交一个事件并将所有复选框值放入一个列表中，然后我将该列表与另一个列表进行比较，以将匹配的检查值从true更改为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);
    }
}

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

答案在你自己的调试信息中;你问的是加拿大，墨西哥和＃34; 由于没有一个国家被称为加拿大，墨西哥和＃34;它们都是错误的。

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

Answer 2

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

可比。

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比较两个列表，不匹配确切的值

2 个答案: