angular - 在角度的DOM查询列表中嵌套遍历

问题描述

嗨，当我正在开发一个页面时，我遇到了一个具有相同级别父复选框的要求，并且每个父级都有他们的子级，这些子级也是复选框。所以我需要当父母被选中时，他们各自的孩子也应该被选中，如果我取消选中，那么应该取消选中。这是我的 html 和组件文件。一切正常，但是当我点击一个父母的孩子复选框然后点击不同的父母然后它变得一团糟。任何帮助，将不胜感激！！

import { Component } from '@angular/core';
import { Input, OnInit, OnDestroy, ViewChildren, ViewChild, ElementRef, QueryList } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    @ViewChildren('fundMenu') public fundMenu: QueryList<any>;
  @ViewChildren('accountMenu') public accountMenu: ElementRef;
  @ViewChild('allchkbox') public allchkbox: ElementRef;
  fun = false;
  selectToggle = false;
  public rorList = [{ key: 'RET', arr: 
  [{performanceType:[{timePeriod:"aa"}]},
  {performanceType:[{timePeriod:"aa"}]},
  {performanceType:[{timePeriod:"aa"}]}] },
  { key: 'NR', arr: [{performanceType:[{timePeriod:"aa"}]}] }];


   public checkAllAccount(account: any, selectToggle: any, val: any):void {
    if(val === 'ALL') {
    //this.accountMenu = this.selectAllParentCheckBox(this.accountMenu, false, this.allchkbox);
   // this.fundMenu = this.selectAllParentCheckBox(this.fundMenu, false, this.allchkbox);
    } else {
      console.log(this.fundMenu);
      console.log(this.accountMenu);
      this.fundMenu = this.selectAllCheckBox(this.fundMenu,false,val);
    }
  }
  
  public fund(){
    this.fun = true;
  }
   public selectAllCheckBox(checkbox: any, selectToggle: boolean, val : any): any {
    // alert(this.fun);
 //   this.selectToggle = !this.selectToggle;
   // alert(selectToggle);
    //this.accountMenu.first.nativeElement
    checkbox.forEach((chkbox: ElementRef, ind: number) => { 
        if(this.fun === true && ind === 0) {
          //alert(chkbox.nativeElement.checked);
          
          this.selectToggle = chkbox.nativeElement.checked;
          //alert(this.selectToggle);
        }
      //  alert(chkbox.nativeElement.checked);
        if(chkbox.nativeElement.value === val) {
         // chkbox.nativeElement.checked = !this.selectToggle;
        if(this.fun === true)
          chkbox.nativeElement.checked = !this.selectToggle ;
          else
         chkbox.nativeElement.checked= !chkbox.nativeElement.checked;
        }
    });
    this.fun = false;
    return checkbox;
  }
}

<hello name="{{ name }}"></hello>
<p>
	Start editing to see some magic happen :)
</p>
<div id=''>
	<div id='' class="" *ngFor='let item of rorList;let i =index'>
		<div>
			<div>
				<div>
					<div>
						<div>
							<span>{{item.key}}</span>
                          <input (click)="checkAllAccount(item.key,i,item.key)" #accountMenu value={{item.key}} type="checkbox">      
                        </div>
                    
                  </div>
                </div>
              </div>
            </div>
            <div  *ngFor='let value of item.arr,let i =index'>
              <div  *ngFor='let rorItem of value.performanceType,let i =index'>
                <div >
                    <div>
                        <input (click)='fund(item.key)' #fundMenu value={{item.key}} type="checkbox">
                       
                      </div>
                  
  
                </div>
              </div>
            </div>
          </div>
        </div>

标签： angulartypescriptangular5

您似乎覆盖了i模板中的变量。首先你有：

<div id='' class="" *ngFor='let item of rorList;let i =index'>
<input (click)="checkAllAccount(item.key,i,item.key)" #accountMenu value={{item.key}} type="checkbox">

（顺便说一句。请在模板中为属性使用双引号。）

然后你有：

<div  *ngFor='let value of item.arr,let i =index'>
  <div  *ngFor='let rorItem of value.performanceType,let i =index'>

所以我会说你i搞混了，这就是为什么你有问题的状态。

angular - 在角度的DOM查询列表中嵌套遍历

问题描述

解决方案

推荐阅读