Javascript 如何在表格中使用复选框显示/隐藏某些字段（例如：status=false）？

我试图显示和隐藏表中状态为false的所有字段。当我选中复选框时，包括status=false在内的所有记录都应该显示出来。当我取消选中复选框时，它应该隐藏状态为false的所有记录。 有人能帮我怎么做吗

---

您好，我在您的

app.component.ts中做了某些修改，请参阅下面的

应用程序组件.ts

export class AppComponent {
  name = 'Angular 6';
  constructor(private http: HttpClient) {}
  url = 'https://jsonplaceholder.typicode.com/todos';
  httpData: any;
  // different display variable created
  displayData: any;

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.httpData = data;
      // keeping a local copy of response
      this.displayData = JSON.parse(JSON.stringify(this.httpData));
    });
  }
  showIncative(value) {
    // based on checked/unchecked flag you can filter data
    this.displayData = JSON.parse(JSON.stringify(this.httpData.filter(f => f.completed == value.currentTarget.checked)));
  }
}  

工作
我可以想出很多方法

第一步是在界面中实际定义要过滤的属性：

interface Kafein {
  name: string;
  address: string;
  completed: string;
}

这将允许您访问.ts和.html文件中的属性，在这两种情况下都是很好的做法

第二步是从复选框中读取事件值，以便进行主动筛选。您可以通过将事件传递给typescript代码来实现，如下所示：

<input type="checkbox" (click)="showIncative($event)">



。。。或者定义一个函数，并在每次调用它时读取函数中的值，但我个人更喜欢传递事件

优点：表的数据将更改，这将触发绑定并更新视图

或者，您可以将checkbox的值直接绑定到公共实例变量

<input type="checkbox" value="displayInactiveItems">



缺点：绑定不会被触发，这意味着您必须调用一些函数来触发HTML的更新

工作示例：

HTML:

Http请求

显示不活动/错误
身份证件
名称
用户Id
地位
{{datas.id}
{{datas.title}
{{datas.userId}
{{datas.completed}

导出类AppComponent{
名称='6'；
构造函数（私有http:HttpClient）{}
url='1〕https://jsonplaceholder.typicode.com/todos';
显示数据：Kafein[]=[]；
private displayInactive:boolean=false；
public showIncative（事件：{target:{checked:boolean}}）{
this.displayInactive=event.target.checked；
}
恩戈尼尼特（）{
this.http.get（this.url）.subscribe（数据=>{
this.displayData=数据；
});
}
公共筛选器活动（项：Kafein[]=this.displayData）{
返回此文件。显示未激活
？项目
：items.filter（item=>/true/i.test（item.completed））；
}
}

另一种方法是将请求中的数据绑定到一个变量，将实际显示的数据绑定到另一个变量（我刚才看到了交叉柱）：

打字稿：

  requestData: Kafein[] = [];
  displayData: Kafein[] = [];

  public showIncative(event?) {
    if (event && event.target.checked) {
      this.displayData = this.requestData; 
    } else {
      this.displayData = this.requestData.filter(item => /true/i.test(item.completed));
    }
  }

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.requestData = data;
      this.showIncative();
    });
  }

requestData:Kafein[]=[]；
显示数据：Kafein[]=[]；
公开展示（活动？）{
if（event&&event.target.checked）{
this.displayData=this.requestData；
}否则{
this.displayData=this.requestData.filter（item=>/true/i.test（item.completed））；
}
}
恩戈尼尼特（）{
this.http.get（this.url）.subscribe（数据=>{
this.requestData=数据；
这个。炫耀性的（）；
});
}

---

有很多方法可以剥那只猫的皮

最简单的方法是使用函数返回过滤后的数据。性能将略有降低，但有很多方法可以缓解这种情况。我更新了你的stackblitz：

---

到目前为止你尝试了什么？您使用的是什么框架（

angular

或

angularjs

）？你遇到了什么问题？请看一下如何提问：

<p>Http Request</p>
<div>
  <input type="checkbox" (click)="showIncative($event)">
  <label>show inactive/false</label>
</div>
<table width="100%" class="my-table">
  <thead class="my-table headers">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>User Id</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody class="my-table body">
    <tr *ngFor="let datas of filterInactive(httpData)">
      <td>{{datas.id}}</td>
      <td style="padding-left:50px">{{datas.title}}</td>
      <td>{{datas.userId}}</td>
      <td>{{datas.completed}}</td>
    </tr>
  </tbody>
</table>

export class AppComponent {
  name = 'Angular 6';
  constructor(private http: HttpClient) {}
  url = 'https://jsonplaceholder.typicode.com/todos';

  displayData: Kafein[] = [];

  private displayInactive: boolean = false;

  public showIncative(event: {target: {checked: boolean}}) {
    this.displayInactive = event.target.checked;
  }

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.displayData = data;
    });
  }

  public filterInactive(items: Kafein[] = this.displayData) {
    return this.displayInactive
      ? items
      : items.filter(item => /true/i.test(item.completed));
  }
}

  requestData: Kafein[] = [];
  displayData: Kafein[] = [];

  public showIncative(event?) {
    if (event && event.target.checked) {
      this.displayData = this.requestData; 
    } else {
      this.displayData = this.requestData.filter(item => /true/i.test(item.completed));
    }
  }

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.requestData = data;
      this.showIncative();
    });
  }

<tr *ngFor="let datas of displayData()">

displayData(): any[] {
    return this.httpData?.filter(x => x.completed !== this.onlyActive )
  }