[英]Type Error: Cannot read property 'length' of null
我想運行這段簡單的代碼,基本上它會根據狀態(字符串)更改標簽和圖標
<ng-container *ngIf="container.length > 0">
<span *ngIf="!container.status.includes('Paused') && container.status.includes('Up')"
class="label label-success label-lg-status"><span class="fa fa-check"></span> Completed - {{ container.status }}</span>
<span *ngIf="container.status.includes('Paused')" class="label label-warning label-lg-status"><span
class="fa fa-pause"></span> Completed - {{ container.status }}</span>
<span *ngIf="container.status.includes('Exited')" class="label label-danger label-lg-status"><span
class="fa fa-stop"></span> Completed - {{ container.status }}</span>
</ng-container>
但是我收到一個錯誤消息,說不能使用null的包含,所以我放了*ngIf="container.length > 0"
,現在我得到ReportComponent.html:22 ERROR TypeError: Cannot read property 'length' of null
如何使html等待get請求的執行?
export class ReportComponent implements OnInit {
private containerName:string;
private processes = [];
private container = [];
private settings = [];
private environment = [];
private id:Number;
constructor(private _route:ActivatedRoute, private dockerService:DockerService, private environmentService:EnvironmentService, private settingsService:SettingsService) { }
ngOnInit() {
// Get Environment id
this._route.params.subscribe(params => {
this.id = params['id'];
// Get Environment
this.environmentService.getEnvironment(this.id).subscribe( environment => {
this.environment = environment;
console.log(environment);
//this.containerName = this.environment.name;
});
// Get Docker processes
this.dockerService.getProcesses(this.containerName).subscribe(processes => {
this.processes = processes;
});
// Get Docker Container Object
this.dockerService.getContainer(this.containerName).subscribe( container => {
this.container = container;
});
// Get Settings
this.settingsService.getSettings().subscribe( settings => {
this.settings = settings;
});
});
}
}
像這樣使用它:
*ngIf="container && (container.length > 0)"
錯誤將被消除。
除非container
數組可用,否則它不會檢查length
。
是的,可以像這樣使用它,它將更像Angular
<ng-container *ngIf="container?.length > 0">
它也會工作。
您的確切問題是服務調用是異步的。 因此,在將值綁定到
container
對象之前就開始DOM渲染。 因為DOM渲染不等待異步服務響應完成
解決方案是,您應該在nginit中初始化數組。
嘗試這個
ngOnInit() {
this.container = []//add this
// Get Environment id
this._route.params.subscribe(params => {
this.id = params['id'];
// Get Environment
this.environmentService.getEnvironment(this.id).subscribe( environment => {
this.environment = environment;
console.log(environment);
//this.containerName = this.environment.name;
});
// Get Docker processes
this.dockerService.getProcesses(this.containerName).subscribe(processes => {
this.processes = processes;
});
// Get Docker Container Object
this.dockerService.getContainer(this.containerName).subscribe( container => {
this.container = container;
});
// Get Settings
this.settingsService.getSettings().subscribe( settings => {
this.settings = settings;
});
});
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.