Ошибка ссылки внутри ngOnInit

Я получаю сообщение об ошибке в своей консоли, которое говорит ERROR ReferenceError: sortedArr is not defined после того, как я определил и отсортировал его.

Вот мой файл app.component.ts:

import { Component } from '@angular/core';
import { HttpClient, OnInit } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  title = 'Contacts';
  contacts: any[] = this.contacts;

  constructor (private httpClient: HttpClient) {}

  ngOnInit(): void {
      //Pull JSON data from REST API
    this.httpClient.get('***URL TO JSON DATA***')
    .subscribe((data) => {
        this.contacts = data;

        //Sort JSON object
        let arr = this.contacts;
        let sortedArr = arr.sort( (a, b) => {
          return (typeof a.name === 'string') - (typeof b.name === 'string') || a.name - b.name || a.name.localeCompare(b.name);
          }););
        console.log(sortedArr);
    });
  }

Отсортированный массив объектов привязан к моему HTML на моей странице в моем веб-приложении, но его нет в консоли. Почему я получаю ReferenceError, когда я только что определил И отсортировал этот массив?

Настоящая причина, по которой я спрашиваю, заключается в том, что мне нужно сделать несколько разных вещей с этим массивом объектов, чтобы он правильно вел себя с моим HTML. Это позволило мне отсортировать его с помощью функции, которую я написал, но я не могу вызвать другой метод для переменной sortedArray, потому что он говорит, что он не определен.


javascript arrays angular sorting ngoninit
person newman    schedule 15.03.2018    source источник
comment
Какая строка вызывает ошибку? Я сомневаюсь, что это тот console.log, который вы показали. Если вы используете эту переменную вне блока подписки, она будет неопределенной.   -  person David    schedule 15.03.2018

Ответы (1)


arrow_upward
2
arrow_downward

вы импортируете OnInit из неправильной библиотеки

import { HttpClient } from '@angular/common/http';

изменить его на:

import { Component, OnInit } from '@angular/core';

Опечатка: );--> удалите это, и оно будет работать. Ключевое слово let ограничивает область действия переменной блоком, и из-за опечатки ); вы не можете получить к ней доступ за пределами области действия блока.

ngOnInit(): void {
      //Pull JSON data from REST API
    this.httpClient.get('***URL TO JSON DATA***')
    .subscribe((data) => {
        this.contacts = data;

        //Sort JSON object
        let arr = this.contacts;
        let sortedArr = arr.sort( (a, b) => {
          return (typeof a.name === 'string') - (typeof b.name === 'string') || a.name - b.name || a.name.localeCompare(b.name);
          }););--> remove it
        console.log(sortedArr);
    });
  }
person Vikas    schedule 15.03.2018
comment
Отличный улов! Я переместил его в правильный импорт, но это, к сожалению, все еще не решило проблему. Все еще получаю ERROR ReferenceError: sortedArr is not defined - person newman; 15.03.2018
comment
Это сделало это, и это имеет смысл. Я закрывал метод подписки слишком рано. Благодарю вас! - person newman; 15.03.2018