टाइप करें 'अवलोकन योग्य <any>' टाइप करने के लिए असाइन नहीं किया जा सकता है '[]'

Question

मैं अंगुलर 2/टाइपस्क्रिप्ट में काफी नया हूं इसलिए कृपया मुझे क्षमा करें अगर मैं कुछ बेवकूफ गलती कर रहा हूं। मैं जो करने की कोशिश कर रहा हूं वह चयन ड्रॉप डाउन से है, मैं सेवा का उपयोग कर डेटा को पॉप्युलेट कर रहा हूं जो मुझे एक JSON सरणी लौटा रहा है।

product-maintenance.component.ts 

import { Component, OnInit} from '@angular/core'; 
import { ProductMaintenanceService } from '../../_services/product-maintenance.service'; 
import { ModuleConst } from '../../../data/const'; 
import { Product } from './product-types'; 
import { Products } from './products'; 

@Component({ 
    selector: 'app-product-maintenance', 
    templateUrl: './product-maintenance.component.html', 
    styleUrls: ['./product-maintenance.component.css'] 
}) 

export class ProductMaintenanceComponent implements OnInit { 
selectedProduct: Product = new Product(0, 'Insurance'); 
products: Product[]; 
productList: Products[]; 

constructor(private productService: ProductMaintenanceService) { 

} 

    ngOnInit() { 
     // Dropdown list 
     this.products = this.productService.getProductTypeList(); 
    } 
    // Populate data using onSelect method 
    onSelect(typeid) { 
     this.productList = this.productService.getProducts() 
     .filter((item)=>item.ptypeid == typeid); 
    } 
} 

product-type.ts (के लिए इस्तेमाल किया ड्रॉप डाउन सूची को भरने के लिए):

export class Product { 
    constructor(
    public ptypeid: number, 
    public name: string 
) { } 
} 

products.ts (सेवा से डेटा को पॉप्युलेट करने के लिए प्रयोग किया जाता):

export class Products { 
    constructor(
     public id: number, 
     public ptypeid: number, 
     public name: string, 
     public currency: string, 
     public state: string, 
     public riskRating: number, 
     public clientSegment: string, 
     public aiStatus: string, 
     public premiumType: string, 
     public tenure: number 
) { } 
} 

यहाँ मेरी कोड है

product-maintenance.service.ts:

import { Injectable, Inject } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/filter'; 
import { APP_CONFIG, IAppConfig } from '../app.config'; 
import { Products } from './products'; 
import { Product } from './product-types'; 

@Injectable() 
export class ProductMaintenanceService { 
    result: Array<Object>; 
    constructor(
     @Inject(APP_CONFIG) private config: IAppConfig, 
     private http: Http 
    ) { } 

    private productURL = 'data/productList.json'; 

    // Get product list 
    getProducts() : Observable<any> { 
    // ...using get request 
    return this.http.get(this.productURL) 
     // ...and calling .json() on the response to return data 
     .map((response: Response) => { 
      console.log(response); 
      return response.json(); 
     }); 
    } 


    getProductTypeList() { 
     return [ 
     new Product(1, 'Unit Trust'), 
     new Product(2, 'Insurance'), 
     new Product(3, 'Structured Deposit'), 
     new Product(4, 'Bonds'), 
     new Product(5, 'DCI'), 
     new Product(6, 'SP') 
     ]; 
    } 
} 

product-maintenance.component.html:

<table> 
<tr *ngFor="let item of productList"> 
       <td>{{ item.id }}</td> 
       <td>{{ item.name }}</td> 
       <td>{{ item.currency }}</td> 
       <td>{{ item.state }}</td> 
       <td>{{ item.riskRating }}</td> 
       <td>{{ item.clientSegment }}</td> 
       <td>{{ item.aiStatus }}</td> 
       <td>{{ item.premiumType }}</td> 
       <td>{{ item.tenure }}</td> 
      </tr> 
</table> 

productList.json:

[ 
     { 
     "ptypeid": 1, 
     "id": 1, 
     "name": "Unit Trust 1", 
     "currency": "SGD", 
     "state": "Active", 
     "riskRating": 1, 
     "clientSegment": "Retail/Premier", 
     "aiStatus": "No", 
     "premiumType": "Regular Premium", 
     "tenure": 5 
     }, 
     { 
     "ptypeid": 2, 
     "id": 2, 
     "name": "Unit Trust 2", 
     "currency": "SGD", 
     "state": "Active", 
     "riskRating": 3, 
     "clientSegment": "Retail/Premier", 
     "aiStatus": "No", 
     "premiumType": "Single/Lumpsum Premium", 
     "tenure": 10 
     } 
] 

अगर मैं परिभाषित मेरी getProducts() रूप getProductTypeList() तो यह पूरी तरह से मेरे विचार (कहाँ अगर मैं बूंद से यूनिट ट्रस्ट चयन में डेटा को आबाद करने है नीचे तो यह प्रासंगिक डेटा पॉप्युलेट करना चाहिए)। लेकिन अगर मैं API URL के रूप में उपयोग करने के बजाय यह मुझे त्रुटि नीचे दे रहा है:

Type 'Observable<any>' is not assignable to type 'Products[]'. Property 'length' is missing in type 'Observable<any>'

मैं कैसे इस त्रुटि को हल करने के लिए समझ में नहीं आता। क्या कोई इस में मेरी मदद कर सकता है। अग्रिम में धन्यवाद।

Answer 1

productListProduct[]Observable<any> नहीं होना चाहिए। तो productList मूल्य निर्दिष्ट getProducts सदस्यता के विधि है, जहां आप Product

onSelect(typeid) { 
    this.productService.getProducts() 
    .filter((item)=>item.ptypeid == typeid) 
    .subscribe((products) => { 
     this.productList = products; 
    }); 
} 

Answer 2

की सरणी पुनः प्राप्त करेगा

समस्याओं के एक जोड़े

getProducts() : Observable<any> { 
    // ...using get request 
    let response = this.http.get(this.productURL) 
     // ...and calling .json() on the response to return data 
     .map((response: Response) => response.json()); 
    return response; 
} 

Answer 3

करने के लिए अपने विधि getProducts विधि बदलें से, पहले मैंने देखा है आप एक रिश्तेदार यूआरएल का उपयोग कर रहे आपके अनुरोध के लिए। वह काम नहीं करेगा। आपको सही यूआरएल होना चाहिए, जिसका अर्थ है http://.. के साथ शुरू होता है भले ही आपका एपीआई स्थानीयहोस्ट पर है, आपको पूरा यूआरएल प्रदान करने की आवश्यकता है। आप

this.productService.getProducts() 
    .subscribe(data => { 
    this.productList = data}) 

के बाद से आप अपने अनुरोध में एक नक्शा कर रहे हैं, तो आप उस की सदस्यता के लिए की जरूरत है, अन्यथा:

दूसरे, get अनुरोध ठीक है, लेकिन अपने घटक में अपने कॉल इस तरह दिखना चाहिए कोई परिणाम नहीं मिलेगा!

वर्थ उल्लेख करना भी है, क्योंकि यह एक एसिंक ऑपरेशन है, इसलिए आप अपनी तालिका में ngIf शामिल करना चाहेंगे, ताकि आपका ऐप डेटा आने से पहले प्रस्तुत किए जाने पर एक त्रुटि फेंक न दे, तो बस करें यह:

<table *ngIf="productList"> 

यह चीजों को साफ़ करना चाहिए!

this.products = this.productService.getProductTypeList(); 

लेकिन फिर आप को ध्यान में रखते async पाइप का उपयोग करना होगा:

वैकल्पिक रूप से, अगर आप सदस्यता के लिए नहीं करना चाहते हैं, तो आप के रूप में आप पहले किया था कर सकते हैं

<tr *ngFor="let item of productList | async"> 

में इस मामले में async-pipe आपके लिए सदस्यता करता है :)