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

【问题标题】：Angular: hidden div based on data not showingAngular：基于未显示数据的隐藏 div
【发布时间】：2017-12-20 17:11:16
【问题描述】：

我有这两个基于数据显示/隐藏的 div；在这种情况下，如果某家公司有账单卡，它将显示卡的信息，否则，它将显示您可以添加该信息的 div。但只有一个 div 显示，我不知道为什么。代码：

 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>

但还是什么都没有……

【问题讨论】：

第一个条件不应该是*ngIf="comapanyHasBilling(entity.id)"（没有!）吗？另外：comapanyHasBilling 应该返回 true 或 false。
它没有任何区别，它只是交换

标签： angular angular-ng-if

【解决方案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

【讨论】：

感谢您的回答，但它并没有解决问题，也许我解释错了自己

【解决方案2】：

为你的第二个组件试试这个

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

【讨论】：

我发现了问题，但发布它很棘手，因为它与构造函数中的属性有关；但就帖子提出的问题而言，所有这些答案都是有效的，所以谢谢大家:)

【解决方案3】：

编辑您的“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;    
}

【讨论】：

【解决方案4】：

尝试返回一个布尔值（问题可能是您检查了 undefined 然后为 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) >

【讨论】：