Question

我在角度4上工作，我有一个复选框列表，在页面加载时将取消选中。有一个删除按钮，当选中任何复选框时将启用该按钮。

hero.component.html

<div *ngFor="let hero of heros">
    <span>
        <input type='checkbox' name='drama' (click)='selectedHero()' />
    </span>
    <span>hero.name</span>
</div>
<button [class.disabled]='!inEditMode'>Delete</button>

hero.component.ts

private inEditMode = false;

selectedHero(){
    var elements = document.getElementsByName("drama");
    for (let i = 0; i < elements.length; i++) {
        if (elements[i].type == "checkbox") {
            if (elements[i].checked) {
                this.inEditMode = true;
            }
            else {
                this.inEditMode = false;
            }
        }
    }
}

我在.type和.checked收到错误。

错误是

Property 'type' doesnot exist on type 'HTMLElement
Property 'checked' doesnot exist on type 'HTMLElement.

如何迭代复选框以查看是否选中了复选框，如果选中则启用按钮。如果没有选中禁用按钮？请指导

Answer 1

你的代码运行正常，但是你的for循环在typescript中的某些时候有效并且因为for循环而失败了。

在你的html中：<button [disabled]='!inEditMode'>Delete</button>

在你的打字稿中：

selectedHero() {
   var elements = (<HTMLInputElement[]><any>document.getElementsByName("drama"));
   for (let i = 0; i < elements.length; i++) {
   if (elements[i].type == "checkbox") {
      if (elements[i].checked) {
         console.log("Checked", elements[i].checked);
         this.inEditMode = true;
         break;                      //<== Add this line in your for loop
       }
       else {
         console.log("Unchecked", elements[i].checked);
         this.inEditMode = false;
       }
     }
   }
 }

当for循环开始直到所有元素都必须被检查时，你必须在检查至少一个复选框时打破for循环。

以下是工作示例：Enable Button on mutiple check box selection

希望这对你有用!!!

Answer 2

你必须投射getElementsByName("drama");的结果像这样：

var elements = (<HTMLInputElement[]><any>document.getElementsByName('drama'));

as document.getElementsByName（）返回类型HTMLElement

Answer 3

尝试使用。

问题是打字稿是类型安全的。 elements [i]包含HTMLElement类型，它不包含type属性。但是，子类型HTMLInputElement包含type属性。

selectedHero(){
var elements = document.getElementsByName("drama");
for(let i=0;i<elements.length;i++){
var element = <HTMLInputElement>elements[i];
if(element.type == "checkbox"){
if(element.checked){
this.inEditMode = true;
}
else{
this.inEditMode = false;
}
}
}
}

Answer 4

您的元素[i]是 HTMLElement ，将其强制转换为 HTMLInputElement 。

Checking属性将用于打字稿中的HTMLInputElement。

下面应该可以工作。

for(let i=0;i<elements.length;i++){
if((elements[i] as HTMLInputElement).type == "checkbox"){
if((elements[i] as HTMLInputElement).checked){
  this.inEditMode = true;
}

Answer 5

你的做法没有错。

尝试使用

进行类型转换

var elements = (<HTMLInputElement[]><any>document.getElementsByName('drama'));

替代尝试使用ngModel，它让您的生活更轻松。

<input [(ngModel)]="checkBox.option1" type="checkbox" data-toggle="toggle">Option
<input [(ngModel)]="checkBox.option2" type="checkbox" data-toggle="toggle">Option

<button [disabled]='checkBox.option1 || checkBox.option2'>Delete</button>

app.component.ts

checkBox:any{};
constructor(){
   checkBox={
       option1:false,
       option2:false
   };
}

选中后，

optionChecked变为true，从而禁用按钮

Answer 6

使用复选框时，我创建了一个复选框数组，在该数组中，我保留所有（在你的情况下是英雄的id）复选框。如果array为空，则禁用按钮，如果数组至少有一个成员，则启用按钮。此外，当您想要检查选中的复选框时，您只需通过一系列复选框进行操作即可。

checkarray: any = [];

选中复选框：

isChecked(item: any): boolean {
        if (this.checkarray.find(x => x.IDHero == item.IDHero)) {
            return true;
        }
        else {
            return false;
        }
    }

从数组中删除成员：

deletefromArray(array: any, element: any, id: string) {
        let temp: any = [];
        for (let i = 0; i < array.length; i++) {
            temp.push(array[i]);
        }
        array.splice(0);
        for (let i = 0; i < temp.length; i++) {
            if (temp[i][id] != element[id]) {
                array.push(temp[i]);
            }
        }
        return array;
    }

将选中的复选框添加到数组：

checkbox(item: IDK, event) {
    if (event.ctrlKey) {
        if (this.checkarray.find(x => x.IDHero == item.IDHero)) {
            this.deleteFromArray(this.checkarray, item, 'IDHero');

            let temp: any = [];
            for (let i = 0; i < this.checkarray.length; i++) {
                temp.push(this.checkarray[i]);
            }
            this.checkarray.splice(0);
            for (let i = 0; i < temp.length; i++) {
                if (temp[i].IDHero != item.IDHero) {
                    this.checkarray.push(temp[i]);
                }
            }
        }
        else {          
            this.checkarray.push(item);
        }
    }
    else {      
        if (!this.checkarray.find(x => x.IDHero == item.IDHero)) {
            this.checkarray.splice(0);
            this.checkarray.push(item);
        } else {
            this.checkarray.splice(0);
        }

    }
}

我使用CTRL进行多次检查。

HTML将是：

<div *ngFor="let hero of heros" (click)="checkbox(hero,$event)>
<span><input type='checkbox' name='drama' [checked]="isChecked(hero)"/></span>
<span>hero.name</span>

<button [disabled]='checkarray.length == 0'>Delete</button>

Answer 7

在Hero模型中添加一个额外属性，如IsSelected，并将其与每个复选框绑定

selectedHero() {

  var data = this.heroes.find((obj: Hero) => obj.IsSelected === true);
  if (data) {
    this.inEditMode = true;
  } else {
    this.inEditMode = false;
  }

}

<div *ngFor="let hero of heros">
  <span>
       <input type='checkbox' value="{{hero.IsSelected}}" [(ngModel)]="hero.IsSelected" name='IsSelected' (change)='selectedHero()'/> />
    </span>
  <span>hero.name</span>
</div>
<button [class.disabled]='!inEditMode'>Delete</button>

stackblitz working demo

打字稿：迭代复选框列表

7 个答案: