服务正在返回对象和 ngFor 不接受对象格式数据

Question

我正在研究Angular Application，其中我正在尝试在 dom 中显示一些信息，但我收到此错误为 ngFor 不接受对象格式数据我试图做的是迭代数据。

错误是 ->> 尝试比较"[对象对象]"时出错。仅数组和 允许迭代对象

因为我只接受

我正在为相同的代码

.ts 文件

      matchUid: any;
  sportsType: any;
  token: any;
  matchData:any = [];
  team1: any;
  team2: any;
      matchstatus: any;
      tournamentName: any;
      jsonData: any;
      matchScore: any;
      matchDetails: any = [];
     ngOnInit() {
        this._route.paramMap.subscribe(params => {  this.matchUid  = params.get('matchId') ,  this.matchstatus = params.get('status')  , this.sportsType = parseInt(params.get('ttypeid'))
        console.log(this.matchstatus);
          })
          this.loadData();
      }

     // match Indivisual Data
      loadData() {
                this.token =  localStorage.getItem('putoken');
                let token = 'Bearer ' + this.token;
                let bodyData = { MatchID: this.matchUid, tTypeID: this.sportsType };
                let liveContestsBody = {
                  matchId: this.matchUid,
                  matchStatus: this.matchstatus,
                };
                this.rest.matchIndevidualData(bodyData, token).then(
                            result => {
                              this.matchData = result;
                              this.team1 = this.matchData.data.team1Name;
                              this.team2 = this.matchData.data.team2Name;
                              this.tournamentName = this.matchData.data.tournamentName;
                              console.log('1');
                              console.log(typeof(result));
                              console.log(this.matchData);
                               },
                            err => {
                              this.router.navigate(['ErrorPage']);
                              console.log('connection failed!...');
                            }
                );
                this.rest.getMatchScore(liveContestsBody).then(
                            result => {
                              this.jsonData = result;
                              console.log(2);
                              console.log(typeof(result));
                              console.log('data');
                              console.log(this.jsonData);
                              if (this.jsonData.status == '1') {
                                this.matchScore = this.jsonData.data;
                                console.log('match details');
                                console.log(this.matchScore);
                              } else {
                                console.log('No data found');
                              }
                            },
                            err => {
                              this.router.navigate(['ErrorPage']);
                              console.log('connection failed');
                            }
                );

                this.rest.getLiveContests(liveContestsBody,token).then(
                                  result => {
                                    this.jsonData = result;
                                    console.log('3');
                                    console.log(typeof(result));
                                    console.log(this.jsonData);
                                    if (this.jsonData.status == '1') {
                                      this.matchData = this.jsonData.data;
                                      console.log(this.matchData);
                                    } else {
                                      console.log('No data found');
                                      }
                                  },
                                  err => {
                                    this.router.navigate(['ErrorPage']);
                                    console.log('connection failed');
                                  }
                );

      }

。.html

<div style='background: crimson;
padding: 21px;color: #fff'>
<h1>  {{matchstatus}} Match </h1>
<span> <strong> Match: </strong>  {{team1}} vs {{team2}}  </span>
<div>
  <p> <strong> Tournament name: </strong> {{tournamentName}}  </p>
<p> <strong> status: </strong> {{matchstatus}} </p>
</div>
</div>
<div>
  <p><bold> Score Card </bold> </p>
  <div *ngFor="let matchScoreData of matchScore">
      <p>{{ matchScoreData.teamName }}</p>
      <p>
        {{ matchScoreData.run }} - {{ matchScoreData.wicket }}<span>({{ matchScoreData.over }})</span>
      </p>
    </div>
</div>
<div>
<button style='    width: 100%;
padding: 10px;
background: tomato;
color: #fff;
' ion-button clear full class="team-preview" (click)="playerPoint()">Players Point</button>
</div>
<div class="contest-section">
    <div *ngIf="!matchData.length">
      <h2>You have not joined any contest in this match</h2>
     <button>  <a (click)="goToMatchCenter()">Please Try another match</a> </button>
    </div>
    <div *ngFor="let match of matchData; let i = index" (click)="goCashContest(match.contestId)">
      <div align-items-center>
            <h3>Winners</h3>
            <p>{{ match.totalWinners }}</p>

          <div>
            <h3>Winnings</h3>
            <p>{{ match.totalWinningAmount }}</p>
          </div>
        <div>
          <div>
            <h3>Entry Fee</h3>
            <p>&#8377;{{ match.entryFee }}</p>
          </div>
        </div>
        <div>
          <div>
            <h3>Rank</h3>
            <p>{{ match.rank }}</p>
          </div>
        </div>
        <div>
          <div>
            <h3>Join With</h3>
            <p>{{ match.joinWith }}</p>
          </div>
        </div>
        <div>
          <div>
            <h3>Points</h3>
            <p>{{ match.points }}</p>
          </div>
        </div>
        <button>Leader Bord</button>
      </div>
    </div>
  </div>

Answer 1

似乎 matchIndevidualData（） 方法不返回数组数据。所以你应该把"结果"推到"匹配细节"数组中。因此，请更改以下内容：

this.matchData = result;

有了这个：

this.matchData.push(result);