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个未定义的值创建数组的，然后此数组本身就不会再更新。

Answer 2

您需要使用*ngFor="let serch of serchArray"提取的所有数组

示例：

<div *ngFor="let serch of serchArray">
   {{serch}}
</div>

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

2 个答案: