Búsqueda de sitios web

javascript - Ocultar componente de Angular si el valor es nulo

Tengo una aplicación en Angular y quiero ocultar (no cargar) un componente si un valor (arreglo) es nulo.

Esto lo tengo como plantilla:

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

Y este es el archivo 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;
}

Y el código ngOnInit:

 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);
      }
    }
  }

Entonces, en la consola obtengo:

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

Entonces, el primer elemento es nulo.

Pero todavía veo el componente en la vista cuando el valor es nulo

¿Entonces cómo arreglar esto? Gracias

si lo hago así:

 isJson: boolean = false;

y esto:

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

Entonces el componente siempre no es visible.

Pero es la propiedad:

ResumenJson :

ver :

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

Cuando JsonSummary es nulo, entonces no mostrar.

Lo tengo ahora así:

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

y esto:

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);
      }
    }
  }

Pero el componente todavía es visible

Respuesta #1

En el archivo TS haz isJson: boolean=false y en el HTML <div *ngIf="isJson">, luego después de obtener un valor para ello cambia isJson a true

Artículos relacionados