首页 文章

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

提问于
浏览 次
2

我有这两个基于数据显示/隐藏的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 =“！comapanyHasBilling（entity.id），她会出现......为什么？日志说我得到了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>

但仍然没有......

angular ngif

4 回答

  • 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
    回复于
  • 1

    试试这个你的第二个组件

    <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>
    回复于
  • 1

    编辑你的'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;    
}
    回复于
  • 1

    尝试返回一个布尔值（问题可能是你用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) >
    回复于

相关问题