angular - করণ - তথ্য ও উপাত্তের মধ্যে পার্থক্য




টাইপ 'অবজেক্ট' এর একটি পৃথক সমর্থনকারী অবজেক্ট '[অবজেক্ট অবজেক্ট]' খুঁজে পাওয়া যায় না। এনজিফোর্স কেবল অ্যারে যেমন আইটেবার্সের জন্য বাধ্যতামূলক সমর্থন করে (10)

আমি অনুরূপ প্রশ্নের দিকে তাকিয়েছিলাম, কিন্তু তাদের কেউই আমাকে সহায়তা করেনি। আমি নীচের মত একটি জিনিস পেতে যাচ্ছি:

[
  {
    "id": 1,
    "name": "Safa",
    "email": "[email protected]",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 2,
    "name": "Safa",
    "email": "[email protected]",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  },
  {
    "id": 3,
    "name": "Salman",
    "email": "[email protected]",
    "purpose": "thesis",
    "programme": "Software Engineering",
    "year": 2016,
    "language": "Estonian",
    "comments": "In need of correcting a dangling participle.",
    "status": "RECEIVED"
  }
]

এবং এটি গ্রহণ করার জন্য আমার HTTP পরিষেবাটি এখানে রয়েছে:

getRequest(){
        return this._http.get("http://consultationwebserver.herokuapp.com/requests").map(res => res.json());
    }

এবং পরিশেষে, আমি পরিষেবাটিকে এইভাবে ডেকেছি:

requests;
    constructor(private _http:requestService){}
    ngOnInit(){
        this.requests=this._http.getRequest().subscribe(res=>this.requests=res);
    }

দুর্ভাগ্যক্রমে, পৃষ্ঠাটি লোড হওয়ার সাথে সাথে:

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

সুতরাং, এই কোডটি দিয়ে কী ভুল হচ্ছে?


আপনার অ্যাসিঙ্ক পাইপ ব্যবহার করা উচিত। ডক: https://angular.io/api/common/AsyncPipe ipe

উদাহরণ স্বরূপ:

<li *ngFor="let a of authorizationTypes | async"[value]="a.id">
     {{ a.name }}
</li>

আপনার জেএসওন ফাইলে, দয়া করে নীচে পরিবর্তন করুন।

 {
    "data":
    [
      {
        "id": 1,
        "name": "Safa",
        "email": "[email protected]",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      },
      {
        "id": 2,
        "name": "Safa",
        "email": "[email protected]",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      },
      {
        "id": 3,
        "name": "Salman",
        "email": "[email protected]",
        "purpose": "thesis",
        "programme": "Software Engineering",
        "year": 2016,
        "language": "Estonian",
        "comments": "In need of correcting a dangling participle.",
        "status": "RECEIVED"
      }
    ]
    }

এবং তারপর:

 this.http.get(url).map(res:Response) => res.json().data);

তথ্যটি আসলে জেসন ফাইলের tge সংগ্রহের নাম। উপরের কোডটি চেষ্টা করুন, আমি নিশ্চিত এটি কার্যকর হবে।


আপনি কৌনিক সঙ্গে বসন্ত বুট ব্যবহার; আপনি ডিফল্ট তৈরি করেন কিনা তা নিশ্চিত করুন


আপনি বইগুলি (লাইনে 2 তে) অ্যারে হিসাবে ঘোষণা করতে পারেন:

  title: any = 'List of books are represted in the bookstore';
  books: any = []; 
  constructor(private service:  AppService){
  }

  ngOnInit(){
    this.getBookDetails();
  }

  getBookDetails() {
    this.service.getBooks().subscribe(books => {
      this.books = books.json();
      console.log(this.books);
    });
  }

আমার সলিউশনটি মান অ্যারে বা প্রপার্টিজ অবজেক্টের ফেরতের জন্য একটি পাইপ তৈরি করা হয়

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

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  // El parametro object representa, los valores de las propiedades o indice
  transform(objects : any = []) {
    return Object.values(objects);
  }
}

টেমপ্লেট প্রয়োগ

<button ion-item *ngFor="let element of element_list | valueArray" >
    {{ element.any_property }}
</button> 

আমি একই সমস্যা আছে. এইভাবেই আমি সমস্যাটি স্থির করেছি। প্রথমে যখন ত্রুটি দেখা দেয় তখন আমার অ্যারে ডেটা ফর্ম ডিবি আসবে -

{brands: Array(5), _id: "5ae9455f7f7af749cb2d3740"} 

নিশ্চিত হয়ে নিন যে আপনার ডেটা একটি অ্যারে, কোনও অ্যারে বহনকারী ওবিজেইসিটি নয়। কেবল অ্যারের মতো দেখতে -

(5) [{…}, {…}, {…}, {…}, {…}]

এটা আমার সমস্যা সমাধান করেছে।


নীচের মত একটি জসন ফর্ম্যাট আছে এমন একটি বস্তুর উপর পুনরাবৃত্তি করতে

{
  "mango": { "color": "orange", "taste": "sweet" }
  "lemon": { "color": "yellow", "taste": "sour" }
}
  1. এটি একটি ভেরিয়েবলকে বরাদ্দ করুন

    let rawData = { "mang":{...}, "lemon": {...} }

  2. মানগুলি (বা কীগুলি) ধরে রাখার জন্য একটি ফাঁকা অ্যারে (গুলি) তৈরি করুন

    let dataValues = []; //For values

    let dataKeys = []; //For keys

  3. কীগুলির উপর লুপ করুন এবং ভেরিয়েবলগুলিতে মানগুলি (এবং কীগুলি) যুক্ত করুন

    for(let key in rawData) { //Pay attention to the 'in' dataValues.push(rawData[key]); dataKeys.push(key); }

  4. এখন আপনার কাছে কী এবং মানগুলির একটি অ্যারে রয়েছে যা আপনি * এনজিফোর্ডে বা লুপের জন্য ব্যবহার করতে পারেন

    for(let d of dataValues) { console.log("Data Values",d); }

    <tr *ngFor='let data of dataValues'> ..... </tr>


সেখানে যখন আপনি কল get তখন আপনাকে this.requests= ব্যবহার করার দরকার নেই (তারপরে requests পর্যবেক্ষণযোগ্য সাবস্ক্রিপশন থাকবে)। আপনি পর্যবেক্ষণযোগ্য success একটি প্রতিক্রিয়া পাবেন যাতে সাফল্যের জন্য requests মানটি সেট করা অর্থপূর্ণ হয়ে উঠবে (যা আপনি ইতিমধ্যে করছেন)।

this._http.getRequest().subscribe(res=>this.requests=res);

this.requests=res এখানে আপনি অবজেক্টের নিম্নলিখিত প্রতিক্রিয়া নির্ধারণ করার চেষ্টা করছেন,

{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK",
"url":"xyz","ok":true,"type":4,"body":[{}]}

যেহেতু, অবজেক্ট ফর্ম্যাটটি আলাদা তবে প্রতিক্রিয়া বিন্যাসটি আপনাকে প্রয়োজনীয় সামগ্রীগুলি পেতে আপনার প্রতিক্রিয়া থেকে res.body অংশ নির্ধারণ করতে হবে।


<ul>
<li *ngFor = "let Data of allDataFromAws  | async">
  <pre> {{ Data | json}}</pre>
</li>
</ul>

AllDataFromAws অ্যারে অবজেক্টে রূপান্তর করতে async ব্যবহার করুন ....