Angular2管道，复选框默认为false。 Angular读为True

Question

如果复选框为true，请尝试运行根据条件过滤数据的管道。这个管道工作得很好，但只有在我单击该框为True然后再返回False然后再次为真。

在这种情况下，我有想要过滤的人，如果他们有状态。无论身份如何，都应该向所有人展示。当应用程序加载时，就好像过滤器已打开，我们只看到那些具有状态的过滤器。如果我打开复选框然后关闭，则只会显示所有人。

就像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>

Answer 1

这是因为 If (isset ($_POST ['submit'])) { $email = $_SESSION ['userEmail']; 最初等于BOD，因此它失败了undefined（＆＃34; BOD是布尔值，等于假＆＃34;）检查。< / p>

只需使用BOD === false代替if (!BOD) return members;和false。