Question

我试图显示3列。

线
客队
家庭团队

我能够在页面上正确显示“行”列。但是AwayTeam和HomeTeam的第二和第三列未显示。

这是我尝试过的代码

x.component.ts

import {Component} from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {forkJoin} from 'rxjs';
import {map} from 'rxjs/operators';

@Component({
  selector: 'app-mlb-api',
  templateUrl: './mlb-api.component.html',
  styleUrls: ['./mlb-api.component.css']
})
export class MlbApiComponent  {
 loadedCharacter: {  
 homeTeamName:string, 
 awayTeamName:string, 
 line:string, 
 EventId:string,
 visitorTeam:string,
 homeTeam:string} = <{homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string}>{};
    allhomeTeamName;
  allawayTeamName;
  allline;
  constructor(private http: HttpClient) {

  }


ngOnInit() {

    let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json')
    .pipe(map((re: any) => re.events));
    let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) => {      

      //this.allNames = draftkingsResp.map(r => r.name);
      //console.log(this.allNames);

      this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      //console.log(this.allhomeTeamName);

       this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      //console.log(this.allawayTeamName);

       //this.alllabel = draftkingsResp.map(r => r.offers).flat().map(o => o.label);
      //console.log(this.alllabel);

      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
       console.log(this.allline);
      //this.allline will have 'undefined' as well
      //if you want then you can filter
      this.allline = this.allline.filter(l => !!l);
      console.log(this.allline);
    });
  }}

x.component.html



<table class="table table-striped table-condensed table-hover">




<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="table-responsive">
        <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">

          <thead>
            <tr>
              <th>Information</th>
              <th>HomeTeam vs AwayTeam</th>
              <th>Line</th>



            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allhomeTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>

                <tbody>
            <tr>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allawayTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>



                </div>
              </div>

           <tbody>
            <tr>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allline">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>


                </div>
              </div> -->

<h4>Draft Kings</h4>

<table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>


                        <th class="line">Line&nbsp;<a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
                        <th class="awayTeamName">awayTeamName&nbsp;<a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
                        <th class="field3">homeTeam&nbsp;<a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>


                    </tr>
                </thead>

                <tbody>
                        <ng-container *ngFor="let data of allline | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">

                    <tr ng-repeat="data in pagedItems[currentPage] | orderBy:sortingOrder:reverse">

        <td>{{data }}</td>
        <td>{{awayTeamName}}</td>


       <td>{{line}} </td>

                    </tr>
                  </ng-container>
                </tbody>
            </table> 
             <pagination-controls (pageChange)="p = $event"></pagination-controls>

我如何显示第二列（即awayTeam）和第三列（即homeTeam）？

Answer 1

在您的情况下，allhomeTeamName，allawayTeamName，allline是3个不同的数组。但是，您尝试仅循环所有行数组。
这就是为什么它只显示Line列而不显示AwayTeam和HomeTeam列的原因。
要在一个表中显示所有3列，您需要使用以上3个数组创建一个数组。
但是在您的情况下，这3个数组的长度（大小）不相等。
allline数组包含168个项目，其他2个数组包含68个项目。
无法从您的问题中得到一个清晰的主意，即如何使用awayTeam和homeTeam绘制线。这意味着对于特定的线路，会有特定的awayTeam和特定的homeTeam。
因此，我将假设allline数组的第一个元素与allawayTeamName数组和allhomeTeamName数组的第一个元素匹配。 allline数组的n个位置的元素与allhomeTeamName和allawayTeamName数组的n个位置的元素匹配。
我通过假设以上提到的观点来给出解决方案。

TS

export class AppComponent  {

allhomeTeamName;
allawayTeamName;
allline;
all: Array<{line: string, awayTeam: string, homeTeam: string}> = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {

    const character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json').pipe(map((re: any) => re.events));
    const characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) => {      

      this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
      this.allline = this.allline.filter(l => !!l);
      this.createAllArray();
    });
  }

  createAllArray(): void {
    for (let i = 0; i < this.allline.length; i++) {
      let item = {
        line: this.allline[i],
        awayTeam: this.allawayTeamName[i],
        homeTeam: this.allhomeTeamName[i]
      }
      this.all.push(item);
    }
  }
}

HTML

<table class="table table-striped table-condensed table-hover">
  <thead>
      <tr>
          <th class="line">Line&nbsp;<a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
          <th class="awayTeamName">awayTeamName&nbsp;<a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
          <th class="field3">homeTeam&nbsp;<a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>
      </tr>
  </thead>

  <tbody>
    <ng-container *ngFor="let item of all">
      <tr>
        <td>{{item.line }}</td>
        <td>{{item.awayTeam}}</td>
        <td>{{item.homeTeam}} </td>
      </tr>
    </ng-container>
  </tbody>
</table>

我认为这会为您提供帮助，并找到有效的stackblitz演示HERE。

Bootstrap表使用* ngFor显示列

1 个答案: