无法读取未定义的属性，即使我已经初始化了它。(角)

Question

我制作了三种类型的过滤器，所以我设计了一个模型：

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

一旦用户从这些类别中的任何一个应用过滤器，我希望将所有选择的值添加到模型的各个数组中。假设我选择了“英语”、“数学”和“科学”，所以我想在"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)的输出不能读取未定义的SearchResultsComponent.searchBySubject的属性'subjects‘；

​

**我的问题是：**

1. 为什么要显示未定义的

如果主题已经存在，

1. 为什么不能阅读。我甚至不能推任何像this.allFiltersApplied.subjects.push("ENGLISH")；

这样的值。

请帮我一下，我不明白，为什么它的行为像这样的

Answer 1

您是说allFiltersApplied是一个变量，但我假设您的意思是它是某个类的属性。(变量将使用const、let或以前的var声明)。

假设您已经在这样的类中声明了它：

export class MyClass {
  allFiltersApplied: filtersApplied;
}

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

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

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

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

但是，如果您将其定义为仅仅是一个type (只是为了强制它的类型)而不是一个完整的class，那么您可以像这样初始化您的属性：

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

几个临别笔记：

对于类和类型的惯例是，它们是convention.

• Comments，所以如果您想要像“先生，我对棱角不太熟悉，但恕我直言，我认为您也不是很有经验”，那么filtersApplied很可能就是FiltersApplied，针对那些花时间尝试帮助您的人，比如@ so (顺便说一句，他的名声在撰写本文时已经超过358,000人)可能会阻止其他人试图帮助您。