Angular2管道，复选框默认假。Angular读取True
Angular2管道，复选框默认假。Angular读取True
提问于 2017-01-10 09:09:20
如果复选框为true，则尝试运行根据条件筛选数据的管道。这个管道工作得很好，但只有在我将框单击为True，然后返回False，然后再次单击true之后，才能使用此管道。
在这种情况下，我希望筛选具有状态的人员。它应该显示每个人，而不管他们的状态如何。当应用程序加载时，就好像过滤器是打开的，我们只看到那些有状态的过滤器。如果我打开复选框然后将其关闭，它才会显示所有人。
它像Angular一样在启动时将复选框读为True，即使DOM将其显示为false。我遗漏了什么？
管道
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterBOD'
})
export class FilterBOD implements PipeTransform {
transform(members: any, BOD: boolean): any {
// check if search term is undefined
if (BOD === false) return members;
// return update name array
return members.filter(function(member){
return member.Board.toLowerCase().includes('Board of Director -'.toLowerCase());
})
}
}DOM
<div class="nameSearchContainer">
<div class="namesearchlabel">Search Member Name:</div>
<input type="text" [(ngModel)]="term" />
<span class="fa fa-search"></span>
</div>
<!-- Board of Directos Toggle -->
<div class="BODContainer">
<label for="boardtoggle">Show Board Of Directors Only:</label>
<input type="checkbox" id="boardtoggle" checked="false" [(ngModel)]="BOD"/>
</div>
<hr>
<!-- Cards -->
<div class="cardwrapper" *ngFor="let member of members | filterBOD:BOD | filterName:term ">
<div class="cardTitle"> {{ member.Board }} {{ member.Title }} </div>
<div class="cardContainer">
<div class="idContainer">
<h1>ID</h1>
<h2>{{ member.ID }}</h2>
</div>
<div class="nameContainer">
<h1>{{ member.FirstName }} {{ member.LastName }} </h1>
<span class="fa fa-user" *ngIf="member.Membership === 'Regular'" > {{ member.Membership }} </span>
<span class="fa fa-users" *ngIf="member.Membership === 'Family'" > {{ member.Membership }} </span>
</div>
<div class="contactInfo">
<div class="addressContainer">
<span class="fa fa-envelope"></span>
<div class="address">
<p> {{ member.Address}} </p>
</div>
</div>
<div class="phoneContainer">
<span class="fa fa-phone"></span>
<div class="phone">
<p> {{ member.Phone }}</p>
</div>
</div>
<div class="emailContainer">
<span class="fa fa-at"></span>
<div class="email">
<p> {{ member.Email }}</p>
</div>
</div>
</div>
<div class="contactvia">
<img src="./components/images/seperator.png" class="verticledivider">
<h1>Contact VIA</h1>
<h2>{{ member.ContactPref }} </h2>
</div>
</div>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-01-10 09:14:16
这是因为BOD最初等于undefined，所以它没有通过BOD === false ("BOD是布尔值，等于false")检查。
只需使用if (!BOD) return members;就可以让它在false和undefined上工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41559640
复制相关文章
相似问题
腾讯云开发者
