각도 : 데이터를 기반으로 숨겨진 div가 표시되지 않습니다.

Question

데이터를 기반으로 표시/숨기기를하는 두 개의 div가 있습니다. 이 경우 특정 회사에 결제 카드가 있으면 카드 정보를 표시하고 그렇지 않으면 해당 정보를 추가 할 수있는 div가 표시됩니다. 하지만 단 하나의 div가 게재되고 있으며 이유를 모르겠습니다. 코드 :

TS

public comapanyHasBilling(companyId: string) { 
     const searchID = this.billingList.find(item => item.companyId === item.companyId) 
     if (searchID !== undefined){ 
      console.log(searchID.companyId) 
     } 

     }); 
     } 

HTML (첫번째 DIV)

<!--If there is a card--> 
    <div *ngIf="!comapanyHasBilling(entity.id)" class="icon-company-title"> 
     <div class="business-icon"> 
     <i class="material-icons md-18">credit_card</i> 
     </div> 
     <span class="company-card-title">Credit Card</span> 
     <button class="" mat-icon-button [matMenuTriggerFor]="menu"> 
     <i class="material-icons edit">mode_edit</i> 
     </button> 
    </div> 



    <!-- Content credit card --> 
     <mdl-card-title mdl-card-expand fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="3px"> 

      <span class="company-card-content company-card-content-edges">cardRef</span> 
      <span class="company-card-content">card</span> 
      <span class="company-card-content">test</span> 
      <span class="company-card-content company-card-content-edges" fxLayoutGap="5px">Name</span> 
     </mdl-card-title> 

그리고 다른 사업부

<!--If there is no card--> 
     <mdl-card-title *ngIf="!comapanyHasBilling(entity.id)" mdl-card-expand fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="30px"> 

      <span class="company-card-title">Payment Method</span> 
      <button (click)="createBillingCard(entity.id)" mat-raised-button class="add-button">ADD</button> 

     </mdl-card-title> 
     </mdl-card> 

아니 메이 무엇을, 나는이를 입력하면 * ngIf = " ! comapanyHasBilling (entity.id)에서 모든 div에 그녀가 나타납니다 ... 왜? 로그에 내가 ID를 얻고 있다고합니다

,210

편집 :

TS :

public companyHasBilling(companyId: string) { 
    const searchID = this.billingList.find(item => item.companyId === companyId) 
    if (searchID !== undefined) { 
     console.log(searchID.companyId); 
    } 
    return searchID; 
    }; 

HTML

<mdl-card-title *ngIf="companyHasBilling(entity.id) === null" mdl-card-expand fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="30px"> 

     <span class="company-card-title">Payment Method</span> 
     <button (click)="createBillingCard(entity.id)" mat-raised-button class="add-button">ADD</button> 

    </mdl-card-title> 

<div *ngIf="companyHasBilling(entity.id) !== null" class="icon-company-title"> 
     <div class="business-icon"> 
     <i class="material-icons md-18">credit_card</i> 
     </div> 
     <span class="company-card-title">Credit Card</span> 
     <button class="" mat-icon-button [matMenuTriggerFor]="menu"> 
     <i class="material-icons edit">mode_edit</i> 
     </button> 
    </div> 

하지만 여전히 아무것도 ....

Answer 1

나는 당신이 단지에 대한 잘못된 인수를 사용하는 틀리지 않는 경우 find 방법.

const searchID = this.billingList.find(item => item.companyId === item.companyId) 
// your function. Look at item.companyId === item.companyId 
// well it always find an element :D 


const searchID = this.billingList.find(item => item.companyId === companyId) 
// this is how it should look like 

Answer 2

편집 귀하의 'comapanyHasBilling'는 결과를 반환해야하고 Patryk Brejdak 말한대로 당신은 회사 ID 비교를 변경해야합니다.

public comapanyHasBilling(companyId: string):boolean { 
    const searchID = this.billingList.find(item => item.companyId === companyId); 

    if (searchID !== undefined){ 
    return true;   
    } 

    return false;  
} 

Answer 3

두 번째 구성 요소에 대한이 시도

<div *ngIf="!comapanyHasBilling(entity.id)"> 
    <mdl-card> 
     <mdl-card-title mdl-card-expand fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="30px"> 
      <span class="company-card-title">Payment Method</span> 
      <button (click)="createBillingCard(entity.id)" mat-raised-button class="add-button">ADD</button> 
     </mdl-card-title> 
    </mdl-card> 
</div> 

Answer 4

부울을 반환 시도

public companyHasBilling(companyId: string) { 
    return this.billingList.find(item => item.companyId === companyId) != undefined; 

    }; 

그리고에서 (문제는 당신이 정의되지 않은 다음 널 (null)와 스트릭 평등을 확인하는 것이 수 있습니다) html

<div *ngIf="!companyHasBilling(entity.id)> 
... 
<div *ngIf="companyHasBilling(entity.id) >