如果複選框爲true，則嘗試運行基於標準過濾數據的管道。這個管道工程很好，但只有當我點擊框到True然後返回False然後再次爲真。Angular2管道，複選框默認爲false。 Angular reads 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>

來源

2017-01-10 Bromox

這是因爲BOD最初等於undefined，所以失敗的BOD === false（「BOD是布爾和等於假」）檢查。

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

來源

2017-01-10 01:14:15 GregL

Angular2管道，複選框默認爲false。 Angular reads True

管

DOM

回答

相關問題