ошибка TS2339: свойство 'hometeam' не существует для типа '{}'

Question

Я сталкиваюсь с ошибками ниже, когда компилирую свой угловой проект 2. Я новичок в Angular 2 и не могу прийти к выводу о резолюции. Я ищу в темах, похожих на это, но это не работает.

1. ошибка TS2339: свойство 'hometeam' не существует для типа '{}'. hometeam - это объект в моих возвращенных данных. Они почему это не рассматривает как объект.

Эта ошибка возникает в нескольких звонках, которые я делаю. Это стековое приложение MEAN. Пожалуйста, посмотрите на скриншот ....

Код:

this.authService.gettodaysmatches().subscribe((data:any) => {
          console.log("Data for today's matches coming up Admin panel...");
          console.log(data);

          this.todaysMatches = data;
          //this.matchId = this.todaysMatches._id;
          for(var i=0; i<this.todaysMatches.length; i++){             
              var hometeam = this.todaysMatches[i].hometeam.teamname;
              var awayteam = this.todaysMatches[i].awayteam.teamname;             

              var obj = {};
              obj.hometeam = hometeam;
              obj.awayteam = awayteam;           
              obj.matchid = this.todaysMatches[i]._id;

              this.todaysTeam.push(obj);
          }
      })  

Answer 1

Вы можете сделать что-то вроде этого:

// Api returned Type
export interface MatchModel{
  id: number;
  title: string;
  hometeam: string;
}
// Light Model.
export interface OtherModel {
  id: Number;
  title: string;
}

@Injectable()
export class ApiService {
  /**
   * Dummy observable to fake Api answer. Return Array of MatchModel
   */
  getDummyData(): Observable<MatchModel[]> {
    return Observable.create((obs) => {
        obs.next([
            {
              id: 1,
              title: "foo",
              hometeam: "bar"
            },
            {
              id: 2,
              title: "ksdof",
              hometeam: "koko"
            },
            {
              id: 3,
              title: "fokokoo",
              hometeam: "sdfsdf"
            }
        ]);
    });
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  providers: [ApiService],
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  public matchs: MatchModel[];
  public others: OtherModel[];

  constructor(private api: ApiService) {
    this.matchs = [];
    this.others = [];
  }

  ngOnInit() {
    this.api.getDummyData().subscribe(matchs => {

        this.matchs = matchs;
        // We just map array of MatchModel to fit on OtherModel type.
        this.others = this.matchs.map(match => {
            return {
              id : match.id,
              title: match.title
            };
        });

        console.log(this.matchs, this.others);
    });
  }
}

Онлайн версия

Answer 2

Вы можете создать пользовательский тип для todaysMatches - TodaysMatches и привести его:

this.authService.gettodaysmatches().subscribe((data:TodaysMatches) => {
<...>

Или используйте типы поиска Typescript и доступ к таким свойствам, как - ['prop']:

this.authService.gettodaysmatches().subscribe((data:any) => {
          this.todaysMatches = data;
          for(var i=0; i<this.todaysMatches.length; i++){             
              var hometeam = this.todaysMatches[i]['hometeam']['teamname'];
              var awayteam = this.todaysMatches[i]['awayteam']['teamname'];             
<...>

p.s. на снимке экрана с этой ошибкой показана куча других ошибок, связанных с Typescript, которые не имеют отношения к опубликованному вами фрагменту кода