当我使用 jquery 和 angular 4 从选中的复选框重新加载页面时如何隐藏该列？

Question

I am using Angular 4 when i reload the page that drop down check boxes would be selected based on local Storage values but selected columns in the drop down box was not hidden..

Component.ts: 在这个组件中，我将 angular 4 与 Jquery

集成在一起

ngOnInit()
{
$(document).ready(function(){
            //here i checked localstorage values
                var checkedvalues = JSON.parse(localStorage.getItem("checkedvalues"));
                console.log(checkedvalues);
            //created obj to store check values
                let someObj:any={};
                someObj.checked=[];
            //looped through checkvalues from local storge ad add checked property to its values
                $.each(checkedvalues, function(key, value) {
                  console.log(key,value);
                  $("#" + value).prop('checked', value);
                  console.log($("#" + value));
                });
                            $(".hidecol").click(function(){

                                var id = this.id; 
                                var splitid = id.split("_");
                                var colno = splitid[1];
                                var checked = true;                                        
                                if($(this).is(":checked")){
                                    checked = true;
            //push chekced values in above created array.
                                    someObj.checked.push($(this).attr("id"));
                                    console.log(someObj.checked);
            //add same values in local storage.
                                    localStorage.setItem("checkedvalues", JSON.stringify(someObj.checked));

                                }else{
                                    checked = false;
                                }
                                setTimeout(function(){
                                    if(checked){
                                        $('#drug_table td:nth-child('+colno+')').hide();
                                        $('#drug_table th:nth-child('+colno+')').hide();
                                    } else{
                                        $('#drug_table td:nth-child('+colno+')').show();
                                        $('#drug_table th:nth-child('+colno+')').show();
                                    }

                                }, 500);

                            });
                        });      
}

ang.html:

在这个 html 中，我给出了下拉框的操作.....

    <div class="chkdropdown" id="chkdropdown">
              Show and Hide Columns
            <ul>
                 <li>
                   <input type="checkbox" class="hidecol"  id="col_2" />&nbsp;S NO&nbsp;                
                </li>
                <li>
                    <input type="checkbox" class="hidecol"  id="col_3" />&nbsp;DrugName&nbsp;                
               </li>
               <li>
                  <input type="checkbox" class="hidecol"  id="col_4" />&nbsp; Generic Name&nbsp;                  
               </li>
               <li>
                  <input type="checkbox" class="hidecol"  id="col_5" />&nbsp;Generic Combination&nbsp;                    
                </li>
                <li>
                    <input type="checkbox" class="hidecol"  id="col_6" />&nbsp;Dosage &nbsp;              
                  </li>
                  <li>
                      <input type="checkbox" class="hidecol"  id="col_7" />&nbsp;VAT &nbsp;               
                    </li>
            </ul>
        </div>

 <table width="100%" id="drug_table"  border="0"  class="table">
          <thead>
            <tr class="tr_header">
            <th>#</th>
            <th> S.No </th>
<tr><thead><table>

图片：

Answer 1

您需要在 localStorage 中设置一个对象数组（在每个对象中应该有一个名为 checked 的属性）。

像这样创建您的 component.ts 文件（比如 ActivityComponent）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-activity',
  templateUrl: './activity.component.html',
  styleUrls: ['./activity.component.css']
})
export class ActivityComponent implements OnInit {
  checkedvalues: any = [];
  constructor() { }

  ngOnInit() {
     this.checkedvalues = JSON.parse(localStorage.getItem("checkedvalues"));
     console.log(checkedvalues);
  }

}

现在您需要使用 *ngFor 在 html 中迭代检查值。添加新字段后，您可以将其推送到 checkedvalues 数组，就像 this.checkedvalues.push() 一样，您可以使用 foreach() 对其进行迭代以检查复选框是否被选中。

在 html 中，每个复选框都需要与 ngModel 绑定为：

<input type="checkbox" class="hidecol"[(ngModel)]=checkedvalues[index].checked name="value">

更准确地说，您的无序列表可以缩短为

<ul>
    <li *ngFor="let checkedvalue of checkedvalues; let i=index;"> 
         <input type="checkbox" class="hidecol"[(ngModel)]=checkedvalue[i].checked name="value">
    </li>
</ul>

现在无论数据存储在 localStorage 中，其状态都会反映在 html。

您需要导入 FormsModule 以使用 [(ngModel)] 和 CommonModule 以在您声明此组件的模块中使用 ngFor（可能在 app.module.ts 中）。

最后使用 <form> 并将您的代码放入其中，以便在提交时可以将数据保存在 localStorage 中。

你不想依赖 jQuery 来显示和隐藏数据使用 ngIf 像：

*ngIf="checkedvalue.checked" 将仅显示 html 元素，只有其检查状态为真。

从 https://angular.io/

了解有关 Angular 的更多信息

当我使用 jquery 和 angular 4 从选中的复选框重新加载页面时如何隐藏该列？

how to hidden the column when i reload the page from selected check box using jquery with angular 4?

checkbox

jquery

jquery-plugins

angular