Angular: versteckte div basierend auf Daten nicht angezeigt

Ich habe diese zwei Divs, die basierend auf Daten zeigen/verbergen; In diesem Fall, wenn eine bestimmte Firma eine Abrechnungskarte hat, wird sie die Info der Karte anzeigen, sonst wird sie das Div anzeigen, wo Sie diese Informationen hinzufügen können. Aber nur ein Div zeigt und ich weiß nicht warum. Der Code:Angular: versteckte div basierend auf Daten nicht angezeigt

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

     }); 
     }

HTML (erste 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>

Und das andere div

<!--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>

: Egal, was, wenn ich dieses Typs * ngIf =“ ! comapanyHasBilling (entity.id) auf jedem Div, sie wird erscheinen ... Warum? Die Logs sagen, dass ich die ID

bekomme

EDIT:

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>

aber noch nichts ....

Quelle

2017-12-20 Mellville

Sollte nicht die erste Bedingung be '* ngIf =" comapanyHasBilling (entity.id) "' (ohne das '!')? Auch: 'comapanyHasBilling' sollte' true' oder 'false' zurückgeben. – ConnorsFan

es macht keinen Unterschied, es schaltet nur – Mellville

Wenn ich Sie falsch Argumente sind nur mit nicht zu verwechseln mit find Methode.

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

Quelle

2017-12-20 17:29:55

Danke für die Antwort, aber es löste das Problem nicht, vielleicht habe ich mich falsch erklärt – Mellville

EDIT Ihr ‚comapanyHasBilling‘ hat ein Ergebnis zurückzukehren und als Patryk Brejdak sagt, Sie müssen den Vergleich CompanyID ändern.

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

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

    return false;  
}

Quelle

2017-12-20 17:45:26 zgue

Versuchen Sie dies für Ihre zweite Komponente

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

Quelle

2017-12-20 17:49:22

Ich fand das Problem, aber es ist schwierig, es zu veröffentlichen, weil es mit Attributionen in einem Konstruktor zu tun hatte ; aber alle diese Antworten sind gültig so weit der Beitrag das Problem vorschlägt, also danke euch allen :) – Mellville

Versuchen Sie, eine boolean Rückkehr (das Problem könnte sein, dass Sie mit undefinierten für strick Gleichheit prüfen und dann null)

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

    };

Und in html

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

Quelle

2017-12-20 18:27:45 David

Angular: versteckte div basierend auf Daten nicht angezeigt

Antwort

Verwandte Themen