时间戳

首页 > 解决方案 > 无法读取未定义的属性，即使我已经对其进行了初始化。（角度）

javascript - 无法读取未定义的属性，即使我已经对其进行了初始化。（角度）

问题描述

我正在制作具有 3 个类别的过滤器，所以我设计了一个模型：

export class filtersApplied {    
    public subjects: string[] = [];
    public price: string[] = [];
    public ratings: number[] = [];
 }

一旦用户从这些类别中的任何一个应用过滤器，我希望将所有这些选择的值添加到模型的相应数组中。假设我选择了“ENGLISH”、“MATHEMATICS”和“SCIENCE”，所以我想将它们插入到“filtersApplied.subjects”中，以便它们可以在后端进行处理。
allFiltersApplied 是一个filtersApplied 类型的变量
allFiltersApplied: filtersApplied;

 <ul class="filter-category-list">
                <li>
                    <label class="filters-label">
              <input
                type="checkbox"
                class="filter-input"
                value="English"
                (change)="searchBySubject($event)"
              />English
              <span class="filter-num">(123)</span>
            </label>
                </li>
                <li>
                    <label class="filters-label">
              <input
                type="checkbox"
                class="filter-input"
                value="Physics"
                (change)="searchBySubject($event)"
              />Physics
              <span class="filter-num">(123)</span>
            </label>
                </li>
                <li>
                    <label class="filters-label">
              <input
                type="checkbox"
                class="filter-input"
                value="Chemistry"
                (change)="searchBySubject($event)"
              />Chemistry
              <span class="filter-num">(123)</span>
            </label>
                </li>
                <li>
                    <label class="filters-label">
              <input
                type="checkbox"
                class="filter-input"
                value="Mathematics"
                (change)="searchBySubject($event)"
              />Mathematics
              <span class="filter-num">(123)</span>
            </label>
                </li>
                <li>
                    <label class="filters-label">
              <input
                type="checkbox"
                class="filter-input"
                value="Science"
                (change)="searchBySubject($event)"
              />Science
              <span class="filter-num">(123)</span>
            </label>
                </li>
            </ul>

这是我在 ts 文件中的函数：

 searchBySubject($event) {
        var subject = $event.target.value;
        console.log(subject); //1
        console.log(this.allFiltersApplied); //2
        console.log(this.allFiltersApplied.subjects); //3
      }

我为 console.log(this.allFiltersApplied) 得到的输出是未定义的；我为 console.log(this.allFiltersApplied.subjects) 得到的输出是 Cannot read property 'subjects' of undefined at SearchResultsComponent.searchBySubject;

**我的问题是：**
1. 为什么它显示未定义
2. 如果它已经存在，为什么不能阅读主题。我什至不能推送像 this.allFiltersApplied.subjects.push("ENGLISH"); 这样的任何值。

请帮助我，我没有得到，为什么会这样

标签： javascriptangularjsangulartypescript

解决方案

你说这allFiltersApplied是一个变量，但我假设你的意思是它是某个类的属性。（变量将用const,let或之前的 ,声明var。）

假设您已在某个类中声明它，如下所示：

export class MyClass {
  allFiltersApplied: filtersApplied;
}

你只是声明了它，你还没有初始化它，所以它的值将是undefined.

将其声明为特定类型只是确保在使用它时，它会在其声明类型的约束范围内使用。

因此，如果您希望它从 的基本结构开始filtersApplied，使用可以将值推入其中的数组，您还需要对其进行初始化。由于filtersApplied被定义为 aclass而不是 a type，你可以像这样实例化它：

export class MyClass {
  allFiltersApplied: filtersApplied = new filtersApplied();
}

但是，如果您将它定义为只是 a type（只是为了强制其类型）而不是 full class，您可以像这样初始化您的属性：

export class MyClass {
  allFiltersApplied: filtersApplied = {
    subjects: [],
    price: [],
    ratings: []
  };
}

几张临别笔记：

  1. 类和类型的约定是它们是 UpperCamelCase，如果您想遵循约定，filtersApplied可能应该是这样。FiltersApplied
  2. 诸如“先生，我对 Angular 没有太多经验，但恕我直言，我认为您也没有多少经验”之类的评论是针对那些花时间尝试帮助您的人，例如 @Pointy（其声誉超过 358,000顺便说一下，写这篇文章的时间）可能会阻止其他人试图帮助你。

推荐阅读