logo标签列表

如果值为null，则隐藏Angular组件。

javascriptangulartypescript
3

我有一个 Angular 应用程序，如果一个值（数组）为空，我想要隐藏（不加载）一个组件。

这是我的模板：

 <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 [{…}]

第一个项是空的。

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

那么如何修复？谢谢。

如果我像这样做：

 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为空时则不显示。
现在我的代码是这样的：
<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);
      }
    }
  }

但组件仍然可见。
3
item.isJson 是一个布尔类型。因此请尝试使用 *ngIf="item.isJson" 来代替。 - Harun Yilmaz
只需尝试使用 https://angular.io/api/common/NgIf。 - TAHA SULTAN TEMURI
1个回答
3
在TS文件中加上 isJson: boolean = false，在html文件中加上 <div *ngIf="isJson">，然后当你获取到它的值后将isJson更改为true。
3
@TAHASULTANTEMURI正在输入答案，所以没有看到。他比我打得快 :) - Massaget
下次加油！ - TAHA SULTAN TEMURI
@Massaget item 是组件的一个属性（this.item）。isJson 是 item 的属性。 - Harun Yilmaz
if (jsonsummary !== null) {this.isJson = true} - Massaget
你的意思是在NgOnInit中吗？ - mightycode Newton
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接