javascript - ngOnInit 内的引用错误

Question

在我定义它并对其进行排序后，我在控制台中收到一条错误消息，显示ERROR ReferenceError:sortedArr未定义。

这是我的 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);
    });
  }

排序后的对象数组已绑定(bind)到我的 Web 应用程序页面上的 HTML，但它不在控制台中。当我刚刚定义并对这个数组进行排序时，为什么会收到 ReferenceError ？

我问这个问题的真正原因是因为我需要对这个对象数组做一些不同的事情，以使其正确地处理我的 HTML。它允许我通过我编写的函数对其进行排序，但我无法在 sortedArray 变量上调用另一个方法，因为它说它尚未定义。

Answer 1

您从错误的库导入 OnInit

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

将其更改为:

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

Typo: );--> 删除它，它将起作用 let 关键字将变量范围限制为 block ，并且由于拼写错误 ); 您无法在 block 范围之外访问它。

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);
    });
  }