如果值为空，则隐藏角度分量

Question

我有一个Angular应用程序，如果一个值(数组)为空，我想隐藏(而不是加载)一个组件。

我有THis作为模板：

 <div *ngIf="item.isJson !== null" >
            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>

这是ts文件：

export class DossierEntry {
  dossierEntryId: number;
  date: string;
  name: string;
  referenceId: string;
  summary: string;
  jsonSummary: Array<DossierEntryHeader>;
  isJson: boolean;
  hasFile: boolean;
  file: Blob;
  fileName: string;
  type: string;
}

和ngOnit代码：

 ngOnInit() {
    console.log(this.item.jsonSummary);
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

因此，在控制台中，我得到：

null
dossier-correspondence-item.component.ts:36 [{…}]
dossier-correspondence-item.component.ts:36 [{…}]

所以第一项是空的。

但是当值为null时，我仍然在视图中看到该组件

那么如何解决这个问题呢？谢谢

如果我这样做：

 isJson: boolean = false;

还有这个：

 <div *ngIf="isJson" >
            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>

则该组件始终不可见。

但这是它的属性：

JsonSUmmary：

请参见：

date: "2018-01-10T08:58:16.6610961+01:00"
dossierEntryId: 144
file: null
hasFile: true
isJson: true
jsonSummary: null
name: "6MWT"
referenceId: "62222050122220501"
summary: null
type: "attachments"
__proto__: Object
dossier-corresponden…tem.component.ts:37 
{dossierEntryId: 142, type: "attachments", date: "2018-01-10T08:56:02.7163505+01:00", name: "X-ECG", summary: null, …}

========================================================================
date: "2018-01-10T08:56:02.7163505+01:00"
dossierEntryId: 142
file: null
hasFile: true
isJson: true
jsonSummary: Array(1)
0: {name: "", order: 1, items: Array(26)}
length: 1
__proto__: Array(0)
name: "X-ECG"
referenceId: "272222050122220501"
summary: null
type: "attachments"
__proto__: Object

当JsonSummary为null时，则不播种。

我现在是这样的：

<div *ngIf="item.isJson" >
            <div class="correspondence-item-p correspondence-item-message">
        <i class="fa fa-file-text-o  font-darkest"></i>
                <div *ngIf="!item.isJson; else summaryIsJson" class="correspondence-item-text correspondence-item-iframe-container">
          <iframe [src]="safeHTMLUrl"></iframe>
        </div>

                <ng-template #summaryIsJson>
          <app-dossier-entry-summary class="correspondence-item-text" [dossierEntry]="item"></app-dossier-entry-summary>
        </ng-template>
      </div>
   </div>

还有这个：

ngOnInit() {
    console.log(this.item);

    if (this.item.jsonSummary !== null)
    {this.isJson = true;}
    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

但是组件仍然可见。

Answer 1

在TS文件中生成isJson: boolean = false，然后在html <div *ngIf="isJson">中获取值后，将isJson更改为true