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>

另一个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>

没有什么，如果我在任何div上输入这个* ngIf =＆＃34;！comapanyHasBilling（entity.id），她会出现......为什么？日志说我得到了身份

编辑：

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

EDIT 您的'comapanyHasBilling'必须返回结果，而Patryk Brejdak说您必须更改companyId比较。

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

尝试返回一个布尔值（问题可能是你用undefined检查strick相等然后为null）

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

  };

并在html中

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

Angular：基于未显示数据的隐藏div

4 个答案: