Type 'PolicyData[]' is missing the following properties from type 'Observable'

Question

Working with returning the json response from my service to a dropdown select at the UI while working on my angular application, but get this issue before i could even run my code Guidance on solving this issue would be really helpful, thanks in advance...

Type 'PolicyData[]' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 5 more.ts(2740)

The below is the code i have used policy.component.ts

public policyinc: Observable<PolicyData[]> = of([]);
getIncCompany() {

        this.policyService.getIncCompany()
        .subscribe(data => { 
            console.log(data);
         this.policyinc = data,
        (error: any) => this.errorMessage = <any>error,
        console.log(this.policyinc);
        }

    );
        }

The service.ts file

 getIncCompany(): Observable<PolicyData[]> {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json'});
  let body = '{}';
  return this.http
  .post<PolicyData[]>(this.apiUrl, body, { headers: headers })
    .pipe(
      tap(data => console.log('getIncCompany: ' + JSON.stringify(data))),
      catchError(this.handleError)
    );
}

And the html component this way

    <div class="col-lg-4 m-form__group-sub">
                                            <mat-form-field class="example-full-width" appearance="outline">
                                                <mat-label> Handicapped Discount
                                                </mat-label>
                                                <mat-select placeholder="Select">
                                                    <mat-option value="option" *ngFor="let polB of policyinc">{{ polB.bankName }}</mat-option>
                                                </mat-select>
                                            </mat-form-field>
                                        </div>

score 0 · Answer 1 · answered Nov 25 '19 at 22:28

policyInc is declared as an Observable

In getIncCompany you subscribe to policyService.getIncCompany, then assign return data to this.policyinc, but the return data is not an Observable.

Try making policyinc simply PolicyData[];

tap operator can be used to log to console

public policyinc: PolicyData[];

getIncCompany() {

  this.policyService.getIncCompany()
    .pipe(tap(data => console.log(data)))
    .subscribe(
      {
        next: data => this.policyinc = data,
        error: error => this.errorMessage = error
      });
}

Also, "In the future, subscribe will only take one argument: either the next handler (a function) or an observer object." from Subscribe is deprecated: Use an observer instead of an error callback

Type 'PolicyData[]' is missing the following properties from type 'Observable'

1 Answers1