錯誤TS2339：類型“ {}”上不存在屬性“ hometeam”

Question

編譯我的angular 2項目時，我面臨以下錯誤。 我是Angular 2的新手，似乎無法得出有關分辨率的結論。 我在SO上搜索與此類似的線程，但無法正常工作。

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

您可以為todaysMatches - 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'];             
<...>

ps該錯誤的屏幕截圖顯示了一堆其他與Typescript相關的錯誤，這些錯誤與您發布的代碼段無關

Answer 2

您可以執行以下操作：

// 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);
    });
  }
}

在線版本