如果没有JSON数据，则在组件中隐藏div

Question

我有一个名为details的组件，它是一个child组件，它将显示另一个名为list的子组件的选定对象属性，如下图所示：

details.component.html

<div classs="details-sec">
 <h3>Customer Details </h3>
  <div>Name : {{contact?.name}}</div>
  <div>Age : {{contact?.age}}</div>
</div>

details.component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent {
  @Input()
  public contact;

}

预期结果：如果list组件没有要发送的数据，

• 然后在details组件中，它应该隐藏details-sec（即名称，年龄）
• 应显示一些文本。

类似这样的东西：

尝试过此question，但对我来说无效。

DEMO

Answer 1

您只需检查contact属性即可显示详细信息，否则可以显示带有所需消息的其他模板。

示例：

details.component.html

<div classs="details-sec" *ngIf="contact; else noDetails">
 <h3>Customer Details </h3>
  <div>Name : {{contact?.name}}</div>
  <div>Age : {{contact?.age}}</div>
</div>

<ng-template #noDetails>
    <div>
        <p>No customer available... </p>
    </div>
</ng-template>

Answer 2

您应该尝试向组件添加一个Input值，例如hasCustomers，如果列表中有任何客户，则应在父级中设置。

然后只需使用*ngIf="hasCustomers"并显示所需的文本即可。

html文件应如下所示：

<div classs="details-sec" *ngIf="hasCustomers">
 <h3>Customer Details </h3>
  <div>Name : {{contact?.name}}</div>
  <div>Age : {{contact?.age}}</div>
</div>
<div *ngIf="!hasCustomers">
  No customer are available
</div>

Answer 3

您可以执行ngIf如果出现角度，请查看此链接。

[https://angular.io/api/common/NgIf][1]

[1]：Angular Ngif