Javascript 如果值为空,则隐藏角度分量
我有一个角度应用程序,如果值(数组)为空,我想隐藏(而不是加载)组件 这是我的模板:Javascript 如果值为空,则隐藏角度分量,javascript,angular,typescript,Javascript,Angular,Typescript,我有一个角度应用程序,如果值(数组)为空,我想隐藏(而不是加载)组件 这是我的模板: <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 !== 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>
因此,在控制台中,我得到:
null
dossier-correspondence-item.component.ts:36 [{…}]
dossier-correspondence-item.component.ts:36 [{…}]
因此,第一项为null
但是当值为null时,我仍然可以在视图中看到该组件
那么如何解决这个问题呢?多谢各位
如果我这样做:
isJson: boolean = false;
<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>
这是:
<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>
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);
}
}
}
当JsonSummary为null时,则不进行排序
我现在是这样的:
isJson: boolean = false;
<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>
但是组件在TS文件make
isJson:boolean=false
和html
中仍然可见,然后在获取其值后,将isJson更改为true项。isJson
是布尔值
。因此,请尝试*ngIf=“item.isJson”
而不是简单地尝试@TAHASULTANTEMURI正在键入答案,因此没有看到答案。他写得比我快:)祝你下次好运time@mightycodeNewton不是*ngIf=“isJson”
。您应该这样做*ngIf=“item.isJson”
@HarunYilmaz没有item
对象declared@Massagetitem
是组件(this.item)的属性isJson
是项的属性
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);
}
}
}