javascript - 类型错误:无法读取 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;
});
});
}
}
解决方案
是的,可以这样使用,它会更 Angular 的方式
<ng-container *ngIf="container?.length > 0">
它也会起作用。
推荐阅读
- clojure - 如何从 Reitit 后端路由中提取路径参数
- c# - XslCompiledTransform 忽略 .NET Framework 4.6 及更高版本上的 DTD 架构
- python - 如何将三个 Conllu 文件与 Conllu python 库合并?
- laravel - Laravel Google App Engine 未找到公共文件
- bash - 如何在不创建文件的情况下获取在 bash 中使用 sqlplus 提取的变量列表
- javascript - Axios 帖子在 Chrome (CORS) 中停滞不前
- python - Django 和 Google Cloud SDK 之间的 argparse 库冲突 - 如何解决
- r - 列中的条件替换值
- java - 如何在 Java 中使用 MaterialSharedAxis 过渡
- c++ - C++。我在 CreateWindow 上遇到访问冲突,使用 getter 来检索类名字符串