Angular OnInit：从服务订阅返回的值返回空空白，因为 API 尚未调用

Question

I am trying to Prepopulate a Dropdown list with API call, and then set Dropdown Default value with the very first item in array[0]. Default value is Not showing, because OnInit executes before API response actually gets data. Thus dropdown is left with blank default item.

Article belows says to use map, but we are creating API proxies from Net Core Swagger. When I type 'map', it gives error. What is a way to solve this, do I have to add Map to my autogenerated proxy files, or is there Alternative Solution? Open to anything. Should I use ToPromise()? I see as option below,

Angular2 - OnInit: Values returned from Service' subscribe function does not get assigned to Component field/s

Property 'map' does not exist on type 'Observable'

export class productDropdownComponent implements OnInit {

  products: any[] = [];
  @Input() productDefaultItem: productDto;
  @Input() selectedproduct: any;
  @Input() TxtField: string = 'productDescription';
  @Input() styles:string; 
  @Output() selectedItemOutput = new EventEmitter();

  constructor(private addressService:AddressServiceProxy, private readonly productService: productService ) { }

  ngOnInit() {
    this.loadproducts() ;

    this.productDefaultItem = new productDto();
    this.productDefaultItem = this.products[0];
  }

  loadproducts() {
    this.addressService.getproductAll().map(res => {
      this.products = res.body;
    })
  }

  statusSelectedItemChanged(e) {
    this.productService.changeMessage(e);
  }

}

Appendix: GetProductAll Proxy Code

getProductAll(): Observable<ProductResponse> {
    let url_ = this.baseUrl + "/api/Product/GetProductAll";
    url_ = url_.replace(/[?&]$/, "");

    let options_ : any = {
        observe: "response",
        responseType: "blob",
        headers: new HttpHeaders({
            "Accept": "application/json"
        })
    };

    return this.http.request("get", url_, options_).pipe(_observableMergeMap((response_ : any) => {
        return this.processGetProductAll(response_);
    })).pipe(_observableCatch((response_: any) => {
        if (response_ instanceof HttpResponseBase) {
            try {
                return this.processGetProductAll(<any>response_);
            } catch (e) {
                return <Observable<ProductResponse>><any>_observableThrow(e);
            }
        } else
            return <Observable<ProductResponse>><any>_observableThrow(response_);
    }));
}

protected processGetProductAll(response: HttpResponseBase): Observable<ProductResponse> {
    const status = response.status;
    const responseBlob = 
        response instanceof HttpResponse ? response.body : 
        (<any>response).error instanceof Blob ? (<any>response).error : undefined;

    let _headers: any = {}; if (response.headers) { for (let key of response.headers.keys()) { _headers[key] = response.headers.get(key); }};
    if (status === 200) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        let result200: any = null;
        let resultData200 = _responseText === "" ? null : JSON.parse(_responseText, this.jsonParseReviver);
        result200 = ProductResponse.fromJS(resultData200);
        return _observableOf(result200);
        }));
    } else if (status === 500) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        return throwException("Server Error", status, _responseText, _headers);
        }));
    } else if (status !== 200 && status !== 204) {
        return blobToText(responseBlob).pipe(_observableMergeMap(_responseText => {
        return throwException("An unexpected server error occurred.", status, _responseText, _headers);
        }));
    }
    return _observableOf<ProductResponse>(<any>null);
}

Answer 1

Fixing your error:

this.products$ = this.addressService.getproductAll().pipe(
  map(res => res.body),
);

With

products$: Observable<productDto[]>;

And in template

<yourdropdown [data]="products$ | async"></yourdropdown>

Answer 2

check this stackblitz for reference StackBlitz Link

here, you have to use map inside pipe operator of rxjs.

• In Service.ts file

  getAllData(){ return this.http.request <any[]> ('get', "https://raw.githubusercontent.com/lewagon/flats-boilerplate/master/flats.json").pipe( map(data => { console.log('map data' + data); return data; }) )

  }

• in component.ts file , You have to use data returned by service directly. like this.

   ngOnInit(){ this.dataService.getAllData().subscribe( (data) => { console.log('server data' + data); this.serviceData = data; }) }

• In your Html Template file

   <div *ngFor="let data of serviceData; let i=index"> <span> {{i+1}} </span> {{data.name}} </div>