Question

类型错误：无法读取 null 的属性“length”

2018-05-21

1115

javascript html angular

我想运行这段简单的代码，基本上它会根据状态（字符串）更改标签和图标

  <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: 无法读取 null 的属性“length”

如何让 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;
        });
    });
  }
}

Answer 1

是的，可以像这样使用它，它将更具 Angular 方式

  <ng-container *ngIf="container?.length > 0">

它也可以工作。

Answer 2

像这样使用：

*ngIf="container && (container.length > 0)"

错误将被删除。

除非 container 数组可用，否则不会检查 length 。

Answer 3

Your exact problem is the service call is asynchronous. So DOM rendering is started before the value is binding in the container object. Because DOM rendering does not wait for the completion of your asynchronous service response

解决方案是，您应该在 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;
        });
    });
  }
}