angularjs directive - Angular2 n-अवैध तर्क प्राप्त करना[ऑब्जेक्ट ऑब्जेक्ट]... पाइप के लिए 'AsyncPipe'



angularjs-directive (1)

मुझे अपने सेवा कॉल के परिणामों को प्रदर्शित करने की कोशिश में एक त्रुटि मिल रही है एचटीएमएल पृष्ठ में एक एनजीएफॉर है | async। मैं कॉल कर सकता हूं, परिणाम प्राप्त कर सकता हूं, लेकिन पृष्ठ को प्रस्तुत करने का प्रयास करते समय एक त्रुटि प्राप्त कर रहा हूं। मुझे पता है कि एसिंक के काम करने के लिए एक अवलोकन के लिए चर की आवश्यकता है मुझे यकीन नहीं है कि मैं क्या कर रहा हूं और कई चीजों की कोशिश की है। किसी अंतर्दृष्टि की सराहना की है

त्रुटि संदेश: अमान्य तर्क '[ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [वस्तु ऑब्जेक्ट] , [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट], [ऑब्जेक्ट ऑब्जेक्ट] , [ऑब्जेक्ट ऑब्जेक्ट] 'पाइप के लिए' असिनकपिप '

परिवर्तनीय परिभाषा

  public products:Observable<Product[]>;

कॉल टू सर्विस

ngOnInit() {

    this.productService.load().subscribe(
      data => {
        // Set the products Array
        this.products = data['_embedded'].products;
      },
      error => console.log('Could not find product catalog.')
    );

}

सेवा का बुलावा

 load() {
    return this._http.get(`http://localhost:8000/products`).map(response => response.json());
  }

एचटीएमएल

<tbody *ngFor="let product of products | async">
          <tr>
            <td>{{product.sku}}</td>
            <td>{{product.materialNumber}}</td>
            <td>{{product.price}}</td>
            <td>{{product.baseUom}}</td>
            <td>{{product.packageSize}}</td>
            <td>{{product.casePack}}</td>
            <td>{{product.weight}}</td>
            <td>{{product.height}}</td>
          </tr>
          </tbody>

कॉल से डेटा


Async पाइप को Observable बजाय एक Array जरूरत है

आपके मामले में बस async को निकालने का प्रयास करें:

<tbody *ngFor="let product of products">

इसके अलावा चर परिभाषा बदलें:

public products:Array<Product> = [];

स्पष्टीकरण: array | async array | async स्वयं द्वारा subscribe है

कोड

this.productService.load().subscribe(
  data => {
    // Set the products Array
    this.products = data['_embedded'].products;
  },...

Array of Products लिए एक Observable गया है

अद्यतन : यह पहले से ही async तरीके से काम करता है: क्योंकि products एक खाली सरणी है, ngFor नहीं चला है। जब Observable को प्रतिक्रिया मिलती है और products में डेटा को पॉप्युलेट करता है, तो एक change detection दौर होता है और फिर ngFor माध्यम से चला जाता है (अब उत्पाद लोकप्रिय हो रहा है)

एक और अजीब बात मैंने देखा है (मैं गलत हो सकता है):

ngFor बहुत tr पर होना चाहिए:

<tbody>
   <tr *ngFor="let product of products | async">
   ...
   </tr>
</tbody>

इस मामले में आपके पास कई पंक्तियां हैं और सिर्फ एक tbody





angular