Angular 7 无法从类属性中获取价值

Question

我是 Angular 和 Typescript 的新手，我正在尝试将一些类属性传递到在同一个类中定义的数组中。请参阅下面的 AppComponent 类。

import { Component } from '@angular/core';
import * as Columns from './dropdown';
import { Query } from './Query';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  keys = Object.keys;

  regions = Columns.Region;
  statuses = Columns.Status;
  languages = Columns.Language;
  types = Columns.Type; 

  searchQuery: string;
  selectedRegion: string;
  selectedStatus: string;
  selectedLanguage: string;
  selectedType: string;

  searchArray: string[] = [ this.searchQuery, this.selectedRegion, this.selectedStatus, this.selectedLanguage, this.selectedType ];

  QueryString = new Query(this.searchQuery, this.selectedRegion, this.selectedStatus, this.selectedLanguage, this.selectedType);
}

如果我只是这样做，那么在我的 HTML 中

<div> {{searchArray}} </div>

什么都没有出现。但是如果我这样做了

<div>{{searchQuery}} + {{selectedLanguage}}</div>

然后我可以在我在搜索框中输入时实时看到变量的变化。 为什么当我尝试将值传递给数组时，数组最终为空？

我认为这是一个异步问题，因为在我进行调用时属性可能没有值，但事实上我可以调用 searchQuery、selectedRegion、selectedStatus 等，并在我输入时看到它们在页面上发生变化搜索框并从下拉列表中选择让我认为这不是问题 - 一旦它有一个值，就会显示该值。

然后我以为是因为我没有初始化或设置这些变量的构造函数，但是它们绑定到不同的输入元素。它们从用户那里获得价值，所以我不能自己设置它们。我怎样才能将它们放入一个数组并将它们传递给一个函数？如有必要，我可以添加我的 HTML 文件。

Answer 1

我认为您正在寻找可以使用自定义访问器来完成：

import { Component } from '@angular/core';
import * as Columns from './dropdown';
import { Query } from './Query';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  keys = Object.keys;

  regions = Columns.Region;
  statuses = Columns.Status;
  languages = Columns.Language;
  types = Columns.Type; 

  searchQuery: string;
  selectedRegion: string;
  selectedStatus: string;
  selectedLanguage: string;
  selectedType: string;

  public get searchArray(): string[] {
    return  [ this.searchQuery, this.selectedRegion, this.selectedStatus, this.selectedLanguage, this.selectedType ];
  }

  QueryString = new Query(this.searchQuery, this.selectedRegion, this.selectedStatus, this.selectedLanguage, this.selectedType);
}

Angular 的更改检测应该在变量更改时检测到更改，因为每次访问 HTML 时都会重新创建数组。您的代码不起作用，因为它最初使用 5 个未定义的值创建数组，然后数组本身不会更新。