Type 'Observable<string[]>' is missing the following properties from type 'string[]': length, pop, push, concat, and 25 more

Question

I am trying to use angular material autocomplete, and while trying to assing the data from database, it gives me this error. Type 'Observable' is missing the following properties from type 'string[]': length, pop, push, concat, and 25 more.

my component.ts

export class SearchComponent implements OnInit {
constructor(private reservationService: ReservationService, private searchService: SearchService){}

 location;
 CheckIn;
 AdultNumber;
 myControl = new FormControl();
 options: string[] = ['One', 'Two', 'Three'];
 filteredOptions: Observable<string[]>;
 regions: string[];

ngOnInit() {
  this.filteredOptions = this.myControl.valueChanges
  .pipe(
    startWith(''),
    map(value => this._filter(value))
  );

  this.reservationService.getRegions().subscribe((data: Observable<string[]>)=>{
    console.log(data);
    this.regions= data;  // ERROR IS HERE ERROR ERROR ERROR
  }) 
  /* this.reservationService.getRegions().subscribe(sa => console.log(sa)); */

}
getregionlist(){

  console.log(this.location,"location")
  console.log(this.CheckIn,"checkindate")
  console.log(this.AdultNumber,"AdultNumber")
  console.log(this.array,"array")

}

private _filter(value: string): string[] {
  const filterValue = value.toLowerCase();

  return this.regions.filter(option => option.toLowerCase().includes(filterValue));
}

my service.ts

getRegions(){
    return this._http.get("https://localhost:44389/api/locations");
 }

my html

<mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
            {{option}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

Have you tried this.. this.reservationService.getRegions().subscribe((data: string[])=>...)? — Chellappan வ
oh yea, my eyes missed this.. so this works now thanks! @Chellappan — WorldOfEmre

Mohd Zeeshan Mohd Zeeshan · Accepted Answer · 2019-11-11T13:43:54

Subscribed data should not of type Observable, you already subscribed the method of Observable type....simply use like below...

In Component :

 this.reservationService.getRegions().subscribe((data)=>{
    console.log(data);
    this.regions= data;  
 })

In Service :

getRegions():Observable{
    return this._http.get("https://localhost:44389/api/locations");
}

Above will work perfectly fine... but if you want to define explicitly... it should be like below.. Subscribed data should not of type Observable, you already subscribed the method of Observable type....simply use like below...

In Component :

 this.reservationService.getRegions().subscribe((data:string[])=>{
    console.log(data);
    this.regions= data;  
 })

In Service :

getRegions():Observable<string[]>{
    return this._http.get("https://localhost:44389/api/locations");
}

or let me know if you need observable string array here... Hope it helps you :)

Type 'Observable<string[]>' is missing the following properties from type 'string[]': length, pop, push, concat, and 25 more

1 Answers