类型“ {}”上不存在属性“ listName”

Question

I get theProperty 'listName' does not exist on type '{}' when I run the following code inside my details page. It seems something trivial, but I spent the entire afternoon not able to understand what is going wrong here.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {ListDetailsService} from '../../providers/list-details-service';


@Component({
  selector: 'page-item-details',
  templateUrl: 'item-details.html'
})
export class ItemDetailsPage {
  selectedItem: any;
  detailsItems : Array<{title: string, note: string, id: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams, public listDetailsService : ListDetailsService) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get('item');

    this.detailsItems = [];
    this.listDetailsService.load(this.selectedItem.id).then(myListItems => {
      console.log(myListItems);
      console.log(myListItems.listName);


    }).catch(function(e){
      console.log(e);
    })
  }
}

When I run console.log(myListItems), I get the following data.

{
items: 
   [ { _id: 58bbf7fd463667f51d7804f6,
       votes: '10',
       item: 'Apple Iphone' },
     { _id: 58bbf7fd463667f51d7804f5,
       votes: '2',
       item: 'Google Phone' },
     { _id: 58bbf7fd463667f51d7804f4,
       votes: '2',
       item: 'Samsung Phone' },
     { _id: 58bbf7fd463667f51d7804f3, votes: '6', item: 'LG Phone' } ],
  __v: 0,
  listName: 'Best Phones',
  _id: 58bbf7fd463667f51d7804f2 }

However, when I run

console.log(myListItems.listName);

I get

Property 'listName' does not exist on type '{}'.

Even though the property is present in the object myListNames

I am sure I am missing something trivial here. But I spend the entire afternoon, not knowing the answer.

Your help is much appreciated!

Answer 1

This is a TypeScript compiler error, and you should probably change the return type of your listDetailsService.load function to either any or an interface you define which matches the object of your list.

export class ListDetailsService {

  //...
  load(): any {
      //...
  }  

}