Ошибка типа: не удается прочитать свойство 'length' со значением NULL

Question

Я хочу запустить этот простой кусок кода, в основном он меняет метку и значок в зависимости от состояния (строка)

  <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>

, но я получаю сообщение об ошибке, в котором говорится, что я не могу использовать include of 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;
        });
    });
  }
}

Answer 1

Да, можете использовать это так, это будет более угловатым способом

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

Это тоже будет работать.

Answer 2

Ваша точная проблема в том, что сервисный вызов асинхронный.Таким образом, рендеринг DOM начинается до того, как значение будет привязано в объекте containerПоскольку рендеринг 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;
        });
    });
  }
}

Answer 3

Используйте это как:

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

Ошибка будет удалена.

Он не проверит length, если не доступен массив container.