error TS2322: Type 'Observable<string[]>' is not assignable to type 'Observable<Sensors[]>'

Question

This error:

error TS2322: Type 'Observable' is not assignable to type 'Observable'. Type 'string[]' is not assignable to type 'Sensors[]'. Type 'string' is not assignable to type 'Sensors'.

show in this Typescript Code:

    import { Observable } from 'rxjs/Rx';
    import { map, startWith } from 'rxjs/operators';

    filteredSensors: Observable<Sensors[]>;

        constructor(private fb: FormBuilder, private ws: SensorService
            ) {
                this.myform= new FormGroup({
                  'sensors_id': this.fb.array([], Validators.required),
                  'unit_price': new FormControl('', [Validators.required, Validators.nullValidator]),
                });

                    this.filteredSensors = this.myform.controls['sensors_id'].valueChanges
                  .pipe(
                    startWith(['']),
                  );
              }
        ngOnInit() {
           this.ws.getAllSensors().subscribe(
            sensors => {
            this.sensors = sensors
           }
         );
       }

In html I have this : *ngFor="let sensor of filteredSensors | async | myPipe: sensors : 'sensor_serial': i"

And I have this pipe:

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
        name: 'myPipe'
    })
 export class MyPipe implements PipeTransform {
    transform<T>(value: Sensors, list: T[], field: string, idx: number): T[] {
        const filterValue = value[idx] ? value[idx].toString().toLowerCase() : ''; //correct this line of as per Sensors object
        return list.filter(sensor => sensor[field].toLowerCase().indexOf(filterValue) === 0);
    }
}

Any idea please, how to solution this error?

Sensors.ts

export class Sensors {
    sensorType_id: number;
    sensortype_id: number;
    sensors_id: string;
    sensor_serial: string;
    active: number;
    sensordescription: string;
    unit_price: number;
    description: string;
    note: string;
    Sensor_id: number;
    default_price: number;
    client_id: string;
    client_name: String;

    constructor(obj: any) {

        this.sensorType_id = obj && obj.sensortype_id || obj.sensorType_id;
        this.sensortype_id = obj && obj.sensortype_id;
        this.client_id = obj && obj.client_id;
        this.sensor_serial = obj && obj.sensor_serial;
        this.sensors_id = obj && obj.sensors_id;
        this.active = obj && obj.active;
        this.sensordescription = obj && obj.sensordescription;
        this.unit_price = obj && obj.unit_price;
        this.description = obj && obj.description;
        this.note = obj && obj.note;
        this.Sensor_id = obj && obj.Sensor_id;
        this.default_price = obj && obj.default_price;
        this.client_name = obj && obj.client_name;
    }
}

and ws SensorService:

public getAllSensors(): Observable<Sensors[]> {
    let headers = new Headers();
    headers.append('x-access-token', this.auth.getCurrentUser().token);
    return this.http.get(Api.getUrl(Api.URLS.getAllSensors), {
        headers: headers
    })
        .map((response: Response) => {
            let res = response.json();
            if (res.StatusCode === 1) {
                this.auth.logout();
                return false;
            } else {
                return res.StatusDescription.map(sensors => {
                    return new Sensors(sensors);
                });
            }
        });
}

i have edited can you check the update stackblitz stackblitz.com/edit/angular-cyc4mf-ya6smp — Chellappan வ

Sunil Singh Sunil Singh · Accepted Answer · 2018-10-15T07:56:53

There is type issue in your Pipe. In Pipe, you are saying that it will operate on String however you are passing Sensors. So change the argument type of Pipe and make the changes in you business login inside the Pipe,

 @Pipe({
  name: 'myPipe'
})
export class MyPipe implements PipeTransform {
  transform(items: string[], value: string): any[] {
    if (!items) {
      return [];
    }
    let array =  items.filter(item => item == value);
    return  items.filter(item => item == value);
  }
}

in html

*ngFor="let sensor of filteredSensors | async | myPipe: i"

Note : 'i' above is value by which filter will apply on.

Working copy is here - https://stackblitz.com/edit/angular-pipe-on-array

error TS2322: Type 'Observable<string[]>' is not assignable to type 'Observable<Sensors[]>'

1 Answers

in html