CODEWITHSUNDEEP
htmlangulartypescript
Wayward Entity
Wayward Entity

Reputation: 89

Angular 7 unable to get value from class properties

I am new to Angular and Typescript and am trying to pass some class properties into an array that is defined in the same class. Please see the AppComponent class below.

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

Then in my HTML if I just do 

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

nothing shows up. But if I do 

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

then I can see the changes in the variable in real time as I type in the search box. Why is it that when I try to pass the values to an array the array ends up null?

I thought it was an asynchronous issue, as the properties probably do not have values when I make the call, but the fact that I can call searchQuery, selectedRegion, selectedStatus, etc and see them change on the page as I type in the search box and select from the dropdowns makes me think this is not the issue -- once it has a value, the value is displayed.

Then I thought it was because I did not have a constructor that initialized or set these variables, but they are bound to different input elements. They get their value from the user so I cannot set them myself. How will I be able to put these into an array and pass them to a function? I can add my HTML file if necessary.

Upvotes: 1

Views: 975

Answers (1)

Chris J
Chris J

Reputation: 121

I think what you're looking for could be done with a custom accessor: 

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's change detection should pick up the changes when the variables are changed, because the array will be recreated each time it is accessed for the HTML. Your code doesn't work because it's creating the array initially with 5 undefined values, and then the array itself isn't updated afterwards.

Upvotes: 1

Related Questions