Не удается прочитать свойство 'length' с неопределенной ошибкой, но все равно отображает правильные данные

Question

По какой-то причине я получаю сообщение об ошибке при попытке определить длину json объекта. Ошибка: ОШИБКА TypeError: Невозможно прочитать свойство 'длина' неопределенного и центра в этой строке:

<div>{{ (locations | filter: query).length }}</div>

Странно то, что он работает и показывает мне длину объекта до конца, и это число точный.

Код находится в моем компоненте. html file:

<div class="col-lg-3 col-md-6 col-6 ml-auto">
          <h5 class="text-center"><div ng-repeat="locations in locations | filter: query"></div>
            <div>{{ (locations | filter: query).length }}</div>
            <br>
            <small class="text-center">Total Locations</small>
          </h5>
        </div>

component.ts:

    import { Component, OnInit, ViewChild, HostListener } from '@angular/core';
import { NgForm, FormBuilder } from '@angular/forms';
import { Organizations } from '../../../../_models/organizations';
import { AlertifyService } from '../../../../_services/alertify.service';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../../../../_services/auth.service';
import { OrganizationService } from '../../../../_services/Organization.service';
import { LocationService } from '../../../../_services/location.service';
import { Locations } from '../../../../_models/locations';

@Component({
  selector: 'app-organization-detail',
  templateUrl: './organization-detail.component.html',
  styleUrls: ['./organization-detail.component.scss']
})
export class OrganizationDetailComponent implements OnInit {
  @ViewChild('editForm', {static: true}) editForm: NgForm;
  searchTerm: string;
  organizations: Organizations;
  locations: Locations;
  currentDate = new Date();
  isActive = false;
  query: number;
  p: number;

  @HostListener('window:beforeunload', ['$event'])
  unloadNotidication($event: any) {
    if (this.editForm.dirty) {
      $event.returnValue = true;
    }
  }

  constructor(private organizationService: OrganizationService, private alertify: AlertifyService, private route: ActivatedRoute, private fb: FormBuilder,
    private router: Router, private authService: AuthService, private locationService: LocationService) { }

  ngOnInit() {
    this.getOrgLocations();

    this.route.data.subscribe(data => {
      this.organizations = data['organization'];
    });
  }

  loadOrganization() {
    this.organizationService.GetOrganization(+this.route.snapshot.params['id']).subscribe((organization: Organizations) => {
      this.organizations = organization;
    }, error => {
      this.alertify.error(error);
    });
  }

  getOrgLocations() {
    this.locationService.getOwnedLocations(+this.route.snapshot.params['id']).subscribe((locations: Locations) => {
      this.locations = locations;
    }, error => {
      this.alertify.error(error);
    });
  }

  updateClient() {
    this.organizationService.updateOrganization(this.organizations.id, this.organizations).subscribe(next => {
      this.alertify.success('Client updated successfully');
      this.editForm.reset(this.loadOrganization());
    }, error => {
      this.alertify.error(error);
    });
  }
}

Любые идеи о том, что может быть причиной этого ? Я не могу понять, почему выдается ошибка, но в то же время она правильно отображает правильные данные

Answer 1

это потому, что в течение нескольких циклов locations не определено, прежде чем оно станет определенным, просто сделайте это:

<div *ngIf="locations">{{ (locations | filter: query).length }}</div>

или

<div>{{ (locations | filter: query)?.length }}</div>

или инициализируйте locations некоторым разумным дефолт. зависит от ваших потребностей.

Answer 2

Согласно вашему коду, вы получаете список местоположений с помощью некоторого вызова API, что в конечном итоге займет некоторое время.

В результате Angular пытается отобразить «местоположения» даже раньше оно инициализируется.

Вы можете попробовать добавить условное выражение в html:

Или просто попытаться установить точку останова / журнал в своем фильтре. Вы узнаете, что передается.

Надеюсь, это поможет.