angular - 如果没有 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（即姓名，年龄）
• 应该显示一些文本。

像这样的东西：

试过这个问题，它对我没有用。

演示

标签： angulartypescript

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>