Question

我正在研究Angular Application，其中我正在尝试在dom中显示一些信息，但由于ngFor不接受对象格式数据而收到此错误我想做的是遍历数据。

错误为->>尝试与'[object Object]'进行比较时出错。仅数组和允许迭代器

因为我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（）方法不返回数组数据。因此，您应该将“结果”推入“ matchDetails”数组。因此，请更改此内容：

this.matchData = result;

与此：

this.matchData.push(result);

服务正在返回对象，并且ngFor不接受对象格式的数据

1 个答案: